Scratch & Win

    <div id="scratch-win" class="scratch-win">
        <div class="scratch-win__title"> Scratch & win</div>
        <div class="scratch-win__scratcher">
          <div class="scratch-win__background">You win</div>
          <canvas id="canvas" class="scratch-win__foreground"></canvas>
        </div>
      </div>
      
      <div id="coin" class="scratch-win__coin">
        <div class="scratch-win__coin-side"></div>
        <div class="scratch-win__coin-base"></div>
      </div>
      
      <div id="confetti" class="confetti">
        <svg class="confetti__item confetti__item--circle" width="6" height="6" viewbox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M0.979033 1.30301C1.85813 0.337112 3.35383 0.26675 4.31973 1.14585C5.28563 2.02495 5.35599 3.52065 4.47684 4.48647C3.59775 5.45237 2.10205 5.52273 1.13623 4.64358C0.170248 3.76453 0.0999339 2.26891 0.979033 1.30301Z" fill="#a864fd" />
        </svg>
        <svg class="confetti__item confetti__item--circle" width="6" height="6" viewbox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M0.979033 1.30301C1.85813 0.337112 3.35383 0.26675 4.31973 1.14585C5.28563 2.02495 5.35599 3.52065 4.47684 4.48647C3.59775 5.45237 2.10205 5.52273 1.13623 4.64358C0.170248 3.76453 0.0999339 2.26891 0.979033 1.30301Z" fill="#a864fd" />
        </svg> <svg class="confetti__item confetti__item--circle" width="6" height="6" viewbox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M0.979033 1.30301C1.85813 0.337112 3.35383 0.26675 4.31973 1.14585C5.28563 2.02495 5.35599 3.52065 4.47684 4.48647C3.59775 5.45237 2.10205 5.52273 1.13623 4.64358C0.170248 3.76453 0.0999339 2.26891 0.979033 1.30301Z" fill="#a864fd" />
        </svg> <svg class="confetti__item confetti__item--circle" width="6" height="6" viewbox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M0.979033 1.30301C1.85813 0.337112 3.35383 0.26675 4.31973 1.14585C5.28563 2.02495 5.35599 3.52065 4.47684 4.48647C3.59775 5.45237 2.10205 5.52273 1.13623 4.64358C0.170248 3.76453 0.0999339 2.26891 0.979033 1.30301Z" fill="#a864fd" />
        </svg> <svg class="confetti__item confetti__item--circle" width="6" height="6" viewbox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M0.979033 1.30301C1.85813 0.337112 3.35383 0.26675 4.31973 1.14585C5.28563 2.02495 5.35599 3.52065 4.47684 4.48647C3.59775 5.45237 2.10205 5.52273 1.13623 4.64358C0.170248 3.76453 0.0999339 2.26891 0.979033 1.30301Z" fill="#a864fd" />
        </svg> <svg class="confetti__item confetti__item--circle" width="6" height="6" viewbox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M0.979033 1.30301C1.85813 0.337112 3.35383 0.26675 4.31973 1.14585C5.28563 2.02495 5.35599 3.52065 4.47684 4.48647C3.59775 5.45237 2.10205 5.52273 1.13623 4.64358C0.170248 3.76453 0.0999339 2.26891 0.979033 1.30301Z" fill="#a864fd" />
        </svg> <svg class="confetti__item confetti__item--circle" width="6" height="6" viewbox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M0.979033 1.30301C1.85813 0.337112 3.35383 0.26675 4.31973 1.14585C5.28563 2.02495 5.35599 3.52065 4.47684 4.48647C3.59775 5.45237 2.10205 5.52273 1.13623 4.64358C0.170248 3.76453 0.0999339 2.26891 0.979033 1.30301Z" fill="#a864fd" />
        </svg> <svg class="confetti__item confetti__item--circle" width="6" height="6" viewbox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M0.979033 1.30301C1.85813 0.337112 3.35383 0.26675 4.31973 1.14585C5.28563 2.02495 5.35599 3.52065 4.47684 4.48647C3.59775 5.45237 2.10205 5.52273 1.13623 4.64358C0.170248 3.76453 0.0999339 2.26891 0.979033 1.30301Z" fill="#a864fd" />
        </svg> <svg class="confetti__item confetti__item--circle" width="6" height="6" viewbox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M0.979033 1.30301C1.85813 0.337112 3.35383 0.26675 4.31973 1.14585C5.28563 2.02495 5.35599 3.52065 4.47684 4.48647C3.59775 5.45237 2.10205 5.52273 1.13623 4.64358C0.170248 3.76453 0.0999339 2.26891 0.979033 1.30301Z" fill="#29cdff" />
        </svg><svg class="confetti__item confetti__item--circle" width="6" height="6" viewbox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M0.979033 1.30301C1.85813 0.337112 3.35383 0.26675 4.31973 1.14585C5.28563 2.02495 5.35599 3.52065 4.47684 4.48647C3.59775 5.45237 2.10205 5.52273 1.13623 4.64358C0.170248 3.76453 0.0999339 2.26891 0.979033 1.30301Z" fill="#29cdff" />
        </svg><svg class="confetti__item confetti__item--circle" width="6" height="6" viewbox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M0.979033 1.30301C1.85813 0.337112 3.35383 0.26675 4.31973 1.14585C5.28563 2.02495 5.35599 3.52065 4.47684 4.48647C3.59775 5.45237 2.10205 5.52273 1.13623 4.64358C0.170248 3.76453 0.0999339 2.26891 0.979033 1.30301Z" fill="#29cdff" />
        </svg><svg class="confetti__item confetti__item--circle" width="6" height="6" viewbox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M0.979033 1.30301C1.85813 0.337112 3.35383 0.26675 4.31973 1.14585C5.28563 2.02495 5.35599 3.52065 4.47684 4.48647C3.59775 5.45237 2.10205 5.52273 1.13623 4.64358C0.170248 3.76453 0.0999339 2.26891 0.979033 1.30301Z" fill="#29cdff" />
        </svg><svg class="confetti__item confetti__item--circle" width="6" height="6" viewbox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M0.979033 1.30301C1.85813 0.337112 3.35383 0.26675 4.31973 1.14585C5.28563 2.02495 5.35599 3.52065 4.47684 4.48647C3.59775 5.45237 2.10205 5.52273 1.13623 4.64358C0.170248 3.76453 0.0999339 2.26891 0.979033 1.30301Z" fill="#29cdff" />
        </svg><svg class="confetti__item confetti__item--circle" width="6" height="6" viewbox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M0.979033 1.30301C1.85813 0.337112 3.35383 0.26675 4.31973 1.14585C5.28563 2.02495 5.35599 3.52065 4.47684 4.48647C3.59775 5.45237 2.10205 5.52273 1.13623 4.64358C0.170248 3.76453 0.0999339 2.26891 0.979033 1.30301Z" fill="#29cdff" />
        </svg>
        <svg class="confetti__item confetti__item--square" width="6" height="6" viewbox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M5.30075 0.975439L5.14456 4.94522C5.13632 5.15408 4.96042 5.3166 4.75161 5.30844L0.781828 5.15225C0.572971 5.14401 0.410451 4.96811 0.41861 4.7593L0.5748 0.789518C0.583039 0.580661 0.758938 0.418139 0.967749 0.426298L4.93753 0.582489C5.14639 0.590727 5.30896 0.766708 5.30075 0.975439Z" fill="#78ff44" />
        </svg>
        <svg class="confetti__item confetti__item--square" width="6" height="6" viewbox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M5.30075 0.975439L5.14456 4.94522C5.13632 5.15408 4.96042 5.3166 4.75161 5.30844L0.781828 5.15225C0.572971 5.14401 0.410451 4.96811 0.41861 4.7593L0.5748 0.789518C0.583039 0.580661 0.758938 0.418139 0.967749 0.426298L4.93753 0.582489C5.14639 0.590727 5.30896 0.766708 5.30075 0.975439Z" fill="#78ff44" />
        </svg> <svg class="confetti__item confetti__item--square" width="6" height="6" viewbox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M5.30075 0.975439L5.14456 4.94522C5.13632 5.15408 4.96042 5.3166 4.75161 5.30844L0.781828 5.15225C0.572971 5.14401 0.410451 4.96811 0.41861 4.7593L0.5748 0.789518C0.583039 0.580661 0.758938 0.418139 0.967749 0.426298L4.93753 0.582489C5.14639 0.590727 5.30896 0.766708 5.30075 0.975439Z" fill="#78ff44" />
        </svg> <svg class="confetti__item confetti__item--square" width="6" height="6" viewbox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M5.30075 0.975439L5.14456 4.94522C5.13632 5.15408 4.96042 5.3166 4.75161 5.30844L0.781828 5.15225C0.572971 5.14401 0.410451 4.96811 0.41861 4.7593L0.5748 0.789518C0.583039 0.580661 0.758938 0.418139 0.967749 0.426298L4.93753 0.582489C5.14639 0.590727 5.30896 0.766708 5.30075 0.975439Z" fill="#78ff44" />
        </svg> <svg class="confetti__item confetti__item--square" width="6" height="6" viewbox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M5.30075 0.975439L5.14456 4.94522C5.13632 5.15408 4.96042 5.3166 4.75161 5.30844L0.781828 5.15225C0.572971 5.14401 0.410451 4.96811 0.41861 4.7593L0.5748 0.789518C0.583039 0.580661 0.758938 0.418139 0.967749 0.426298L4.93753 0.582489C5.14639 0.590727 5.30896 0.766708 5.30075 0.975439Z" fill="#78ff44" />
        </svg> <svg class="confetti__item confetti__item--square" width="6" height="6" viewbox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M5.30075 0.975439L5.14456 4.94522C5.13632 5.15408 4.96042 5.3166 4.75161 5.30844L0.781828 5.15225C0.572971 5.14401 0.410451 4.96811 0.41861 4.7593L0.5748 0.789518C0.583039 0.580661 0.758938 0.418139 0.967749 0.426298L4.93753 0.582489C5.14639 0.590727 5.30896 0.766708 5.30075 0.975439Z" fill="#78ff44" />
        </svg> <svg class="confetti__item confetti__item--square" width="6" height="6" viewbox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M5.30075 0.975439L5.14456 4.94522C5.13632 5.15408 4.96042 5.3166 4.75161 5.30844L0.781828 5.15225C0.572971 5.14401 0.410451 4.96811 0.41861 4.7593L0.5748 0.789518C0.583039 0.580661 0.758938 0.418139 0.967749 0.426298L4.93753 0.582489C5.14639 0.590727 5.30896 0.766708 5.30075 0.975439Z" fill="#78ff44" />
        </svg> <svg class="confetti__item confetti__item--square" width="6" height="6" viewbox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M5.30075 0.975439L5.14456 4.94522C5.13632 5.15408 4.96042 5.3166 4.75161 5.30844L0.781828 5.15225C0.572971 5.14401 0.410451 4.96811 0.41861 4.7593L0.5748 0.789518C0.583039 0.580661 0.758938 0.418139 0.967749 0.426298L4.93753 0.582489C5.14639 0.590727 5.30896 0.766708 5.30075 0.975439Z" fill="#ff718d" />
        </svg>
        <svg class="confetti__item confetti__item--square" width="6" height="6" viewbox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M5.30075 0.975439L5.14456 4.94522C5.13632 5.15408 4.96042 5.3166 4.75161 5.30844L0.781828 5.15225C0.572971 5.14401 0.410451 4.96811 0.41861 4.7593L0.5748 0.789518C0.583039 0.580661 0.758938 0.418139 0.967749 0.426298L4.93753 0.582489C5.14639 0.590727 5.30896 0.766708 5.30075 0.975439Z" fill="#ff718d" />
        </svg>
        <svg class="confetti__item confetti__item--square" width="6" height="6" viewbox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M5.30075 0.975439L5.14456 4.94522C5.13632 5.15408 4.96042 5.3166 4.75161 5.30844L0.781828 5.15225C0.572971 5.14401 0.410451 4.96811 0.41861 4.7593L0.5748 0.789518C0.583039 0.580661 0.758938 0.418139 0.967749 0.426298L4.93753 0.582489C5.14639 0.590727 5.30896 0.766708 5.30075 0.975439Z" fill="#ff718d" />
        </svg>
        <svg class="confetti__item confetti__item--square" width="6" height="6" viewbox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M5.30075 0.975439L5.14456 4.94522C5.13632 5.15408 4.96042 5.3166 4.75161 5.30844L0.781828 5.15225C0.572971 5.14401 0.410451 4.96811 0.41861 4.7593L0.5748 0.789518C0.583039 0.580661 0.758938 0.418139 0.967749 0.426298L4.93753 0.582489C5.14639 0.590727 5.30896 0.766708 5.30075 0.975439Z" fill="#ff718d" />
        </svg>
        <svg class="confetti__item confetti__item--square" width="6" height="6" viewbox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M5.30075 0.975439L5.14456 4.94522C5.13632 5.15408 4.96042 5.3166 4.75161 5.30844L0.781828 5.15225C0.572971 5.14401 0.410451 4.96811 0.41861 4.7593L0.5748 0.789518C0.583039 0.580661 0.758938 0.418139 0.967749 0.426298L4.93753 0.582489C5.14639 0.590727 5.30896 0.766708 5.30075 0.975439Z" fill="#ff718d" />
        </svg>
        <svg class="confetti__item confetti__item--square" width="6" height="6" viewbox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M5.30075 0.975439L5.14456 4.94522C5.13632 5.15408 4.96042 5.3166 4.75161 5.30844L0.781828 5.15225C0.572971 5.14401 0.410451 4.96811 0.41861 4.7593L0.5748 0.789518C0.583039 0.580661 0.758938 0.418139 0.967749 0.426298L4.93753 0.582489C5.14639 0.590727 5.30896 0.766708 5.30075 0.975439Z" fill="#ff718d" />
        </svg>
        <svg class="confetti__item confetti__item--square" width="6" height="6" viewbox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M5.30075 0.975439L5.14456 4.94522C5.13632 5.15408 4.96042 5.3166 4.75161 5.30844L0.781828 5.15225C0.572971 5.14401 0.410451 4.96811 0.41861 4.7593L0.5748 0.789518C0.583039 0.580661 0.758938 0.418139 0.967749 0.426298L4.93753 0.582489C5.14639 0.590727 5.30896 0.766708 5.30075 0.975439Z" fill="#ff718d" />
        </svg>
        <svg class="confetti__item confetti__item--square" width="6" height="6" viewbox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M5.30075 0.975439L5.14456 4.94522C5.13632 5.15408 4.96042 5.3166 4.75161 5.30844L0.781828 5.15225C0.572971 5.14401 0.410451 4.96811 0.41861 4.7593L0.5748 0.789518C0.583039 0.580661 0.758938 0.418139 0.967749 0.426298L4.93753 0.582489C5.14639 0.590727 5.30896 0.766708 5.30075 0.975439Z" fill="#ff718d" />
        </svg>
        <svg class="confetti__item confetti__item--circle" width="6" height="6" viewbox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M0.979033 1.30301C1.85813 0.337112 3.35383 0.26675 4.31973 1.14585C5.28563 2.02495 5.35599 3.52065 4.47684 4.48647C3.59775 5.45237 2.10205 5.52273 1.13623 4.64358C0.170248 3.76453 0.0999339 2.26891 0.979033 1.30301Z" fill="#a864fd" />
        </svg>
        <svg class="confetti__item confetti__item--circle" width="6" height="6" viewbox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M0.979033 1.30301C1.85813 0.337112 3.35383 0.26675 4.31973 1.14585C5.28563 2.02495 5.35599 3.52065 4.47684 4.48647C3.59775 5.45237 2.10205 5.52273 1.13623 4.64358C0.170248 3.76453 0.0999339 2.26891 0.979033 1.30301Z" fill="#a864fd" />
        </svg> <svg class="confetti__item confetti__item--circle" width="6" height="6" viewbox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M0.979033 1.30301C1.85813 0.337112 3.35383 0.26675 4.31973 1.14585C5.28563 2.02495 5.35599 3.52065 4.47684 4.48647C3.59775 5.45237 2.10205 5.52273 1.13623 4.64358C0.170248 3.76453 0.0999339 2.26891 0.979033 1.30301Z" fill="#a864fd" />
        </svg> <svg class="confetti__item confetti__item--circle" width="6" height="6" viewbox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M0.979033 1.30301C1.85813 0.337112 3.35383 0.26675 4.31973 1.14585C5.28563 2.02495 5.35599 3.52065 4.47684 4.48647C3.59775 5.45237 2.10205 5.52273 1.13623 4.64358C0.170248 3.76453 0.0999339 2.26891 0.979033 1.30301Z" fill="#a864fd" />
        </svg> <svg class="confetti__item confetti__item--circle" width="6" height="6" viewbox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M0.979033 1.30301C1.85813 0.337112 3.35383 0.26675 4.31973 1.14585C5.28563 2.02495 5.35599 3.52065 4.47684 4.48647C3.59775 5.45237 2.10205 5.52273 1.13623 4.64358C0.170248 3.76453 0.0999339 2.26891 0.979033 1.30301Z" fill="#a864fd" />
        </svg> <svg class="confetti__item confetti__item--circle" width="6" height="6" viewbox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M0.979033 1.30301C1.85813 0.337112 3.35383 0.26675 4.31973 1.14585C5.28563 2.02495 5.35599 3.52065 4.47684 4.48647C3.59775 5.45237 2.10205 5.52273 1.13623 4.64358C0.170248 3.76453 0.0999339 2.26891 0.979033 1.30301Z" fill="#a864fd" />
        </svg> <svg class="confetti__item confetti__item--circle" width="6" height="6" viewbox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M0.979033 1.30301C1.85813 0.337112 3.35383 0.26675 4.31973 1.14585C5.28563 2.02495 5.35599 3.52065 4.47684 4.48647C3.59775 5.45237 2.10205 5.52273 1.13623 4.64358C0.170248 3.76453 0.0999339 2.26891 0.979033 1.30301Z" fill="#a864fd" />
        </svg> <svg class="confetti__item confetti__item--circle" width="6" height="6" viewbox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M0.979033 1.30301C1.85813 0.337112 3.35383 0.26675 4.31973 1.14585C5.28563 2.02495 5.35599 3.52065 4.47684 4.48647C3.59775 5.45237 2.10205 5.52273 1.13623 4.64358C0.170248 3.76453 0.0999339 2.26891 0.979033 1.30301Z" fill="#a864fd" />
        </svg> <svg class="confetti__item confetti__item--circle" width="6" height="6" viewbox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M0.979033 1.30301C1.85813 0.337112 3.35383 0.26675 4.31973 1.14585C5.28563 2.02495 5.35599 3.52065 4.47684 4.48647C3.59775 5.45237 2.10205 5.52273 1.13623 4.64358C0.170248 3.76453 0.0999339 2.26891 0.979033 1.30301Z" fill="#29cdff" />
        </svg><svg class="confetti__item confetti__item--circle" width="6" height="6" viewbox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M0.979033 1.30301C1.85813 0.337112 3.35383 0.26675 4.31973 1.14585C5.28563 2.02495 5.35599 3.52065 4.47684 4.48647C3.59775 5.45237 2.10205 5.52273 1.13623 4.64358C0.170248 3.76453 0.0999339 2.26891 0.979033 1.30301Z" fill="#29cdff" />
        </svg><svg class="confetti__item confetti__item--circle" width="6" height="6" viewbox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M0.979033 1.30301C1.85813 0.337112 3.35383 0.26675 4.31973 1.14585C5.28563 2.02495 5.35599 3.52065 4.47684 4.48647C3.59775 5.45237 2.10205 5.52273 1.13623 4.64358C0.170248 3.76453 0.0999339 2.26891 0.979033 1.30301Z" fill="#29cdff" />
        </svg><svg class="confetti__item confetti__item--circle" width="6" height="6" viewbox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M0.979033 1.30301C1.85813 0.337112 3.35383 0.26675 4.31973 1.14585C5.28563 2.02495 5.35599 3.52065 4.47684 4.48647C3.59775 5.45237 2.10205 5.52273 1.13623 4.64358C0.170248 3.76453 0.0999339 2.26891 0.979033 1.30301Z" fill="#29cdff" />
        </svg><svg class="confetti__item confetti__item--circle" width="6" height="6" viewbox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M0.979033 1.30301C1.85813 0.337112 3.35383 0.26675 4.31973 1.14585C5.28563 2.02495 5.35599 3.52065 4.47684 4.48647C3.59775 5.45237 2.10205 5.52273 1.13623 4.64358C0.170248 3.76453 0.0999339 2.26891 0.979033 1.30301Z" fill="#29cdff" />
        </svg><svg class="confetti__item confetti__item--circle" width="6" height="6" viewbox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M0.979033 1.30301C1.85813 0.337112 3.35383 0.26675 4.31973 1.14585C5.28563 2.02495 5.35599 3.52065 4.47684 4.48647C3.59775 5.45237 2.10205 5.52273 1.13623 4.64358C0.170248 3.76453 0.0999339 2.26891 0.979033 1.30301Z" fill="#29cdff" />
        </svg>
        <svg class="confetti__item confetti__item--square" width="6" height="6" viewbox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M5.30075 0.975439L5.14456 4.94522C5.13632 5.15408 4.96042 5.3166 4.75161 5.30844L0.781828 5.15225C0.572971 5.14401 0.410451 4.96811 0.41861 4.7593L0.5748 0.789518C0.583039 0.580661 0.758938 0.418139 0.967749 0.426298L4.93753 0.582489C5.14639 0.590727 5.30896 0.766708 5.30075 0.975439Z" fill="#78ff44" />
        </svg>
        <svg class="confetti__item confetti__item--square" width="6" height="6" viewbox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M5.30075 0.975439L5.14456 4.94522C5.13632 5.15408 4.96042 5.3166 4.75161 5.30844L0.781828 5.15225C0.572971 5.14401 0.410451 4.96811 0.41861 4.7593L0.5748 0.789518C0.583039 0.580661 0.758938 0.418139 0.967749 0.426298L4.93753 0.582489C5.14639 0.590727 5.30896 0.766708 5.30075 0.975439Z" fill="#78ff44" />
        </svg> <svg class="confetti__item confetti__item--square" width="6" height="6" viewbox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M5.30075 0.975439L5.14456 4.94522C5.13632 5.15408 4.96042 5.3166 4.75161 5.30844L0.781828 5.15225C0.572971 5.14401 0.410451 4.96811 0.41861 4.7593L0.5748 0.789518C0.583039 0.580661 0.758938 0.418139 0.967749 0.426298L4.93753 0.582489C5.14639 0.590727 5.30896 0.766708 5.30075 0.975439Z" fill="#78ff44" />
        </svg> <svg class="confetti__item confetti__item--square" width="6" height="6" viewbox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M5.30075 0.975439L5.14456 4.94522C5.13632 5.15408 4.96042 5.3166 4.75161 5.30844L0.781828 5.15225C0.572971 5.14401 0.410451 4.96811 0.41861 4.7593L0.5748 0.789518C0.583039 0.580661 0.758938 0.418139 0.967749 0.426298L4.93753 0.582489C5.14639 0.590727 5.30896 0.766708 5.30075 0.975439Z" fill="#78ff44" />
        </svg> <svg class="confetti__item confetti__item--square" width="6" height="6" viewbox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M5.30075 0.975439L5.14456 4.94522C5.13632 5.15408 4.96042 5.3166 4.75161 5.30844L0.781828 5.15225C0.572971 5.14401 0.410451 4.96811 0.41861 4.7593L0.5748 0.789518C0.583039 0.580661 0.758938 0.418139 0.967749 0.426298L4.93753 0.582489C5.14639 0.590727 5.30896 0.766708 5.30075 0.975439Z" fill="#78ff44" />
        </svg> <svg class="confetti__item confetti__item--square" width="6" height="6" viewbox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M5.30075 0.975439L5.14456 4.94522C5.13632 5.15408 4.96042 5.3166 4.75161 5.30844L0.781828 5.15225C0.572971 5.14401 0.410451 4.96811 0.41861 4.7593L0.5748 0.789518C0.583039 0.580661 0.758938 0.418139 0.967749 0.426298L4.93753 0.582489C5.14639 0.590727 5.30896 0.766708 5.30075 0.975439Z" fill="#78ff44" />
        </svg> <svg class="confetti__item confetti__item--square" width="6" height="6" viewbox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M5.30075 0.975439L5.14456 4.94522C5.13632 5.15408 4.96042 5.3166 4.75161 5.30844L0.781828 5.15225C0.572971 5.14401 0.410451 4.96811 0.41861 4.7593L0.5748 0.789518C0.583039 0.580661 0.758938 0.418139 0.967749 0.426298L4.93753 0.582489C5.14639 0.590727 5.30896 0.766708 5.30075 0.975439Z" fill="#78ff44" />
        </svg> <svg class="confetti__item confetti__item--square" width="6" height="6" viewbox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M5.30075 0.975439L5.14456 4.94522C5.13632 5.15408 4.96042 5.3166 4.75161 5.30844L0.781828 5.15225C0.572971 5.14401 0.410451 4.96811 0.41861 4.7593L0.5748 0.789518C0.583039 0.580661 0.758938 0.418139 0.967749 0.426298L4.93753 0.582489C5.14639 0.590727 5.30896 0.766708 5.30075 0.975439Z" fill="#ff718d" />
        </svg>
        <svg class="confetti__item confetti__item--square" width="6" height="6" viewbox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M5.30075 0.975439L5.14456 4.94522C5.13632 5.15408 4.96042 5.3166 4.75161 5.30844L0.781828 5.15225C0.572971 5.14401 0.410451 4.96811 0.41861 4.7593L0.5748 0.789518C0.583039 0.580661 0.758938 0.418139 0.967749 0.426298L4.93753 0.582489C5.14639 0.590727 5.30896 0.766708 5.30075 0.975439Z" fill="#ff718d" />
        </svg>
        <svg class="confetti__item confetti__item--square" width="6" height="6" viewbox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M5.30075 0.975439L5.14456 4.94522C5.13632 5.15408 4.96042 5.3166 4.75161 5.30844L0.781828 5.15225C0.572971 5.14401 0.410451 4.96811 0.41861 4.7593L0.5748 0.789518C0.583039 0.580661 0.758938 0.418139 0.967749 0.426298L4.93753 0.582489C5.14639 0.590727 5.30896 0.766708 5.30075 0.975439Z" fill="#ff718d" />
        </svg>
        <svg class="confetti__item confetti__item--square" width="6" height="6" viewbox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M5.30075 0.975439L5.14456 4.94522C5.13632 5.15408 4.96042 5.3166 4.75161 5.30844L0.781828 5.15225C0.572971 5.14401 0.410451 4.96811 0.41861 4.7593L0.5748 0.789518C0.583039 0.580661 0.758938 0.418139 0.967749 0.426298L4.93753 0.582489C5.14639 0.590727 5.30896 0.766708 5.30075 0.975439Z" fill="#ff718d" />
        </svg>
        <svg class="confetti__item confetti__item--square" width="6" height="6" viewbox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M5.30075 0.975439L5.14456 4.94522C5.13632 5.15408 4.96042 5.3166 4.75161 5.30844L0.781828 5.15225C0.572971 5.14401 0.410451 4.96811 0.41861 4.7593L0.5748 0.789518C0.583039 0.580661 0.758938 0.418139 0.967749 0.426298L4.93753 0.582489C5.14639 0.590727 5.30896 0.766708 5.30075 0.975439Z" fill="#ff718d" />
        </svg>
        <svg class="confetti__item confetti__item--square" width="6" height="6" viewbox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M5.30075 0.975439L5.14456 4.94522C5.13632 5.15408 4.96042 5.3166 4.75161 5.30844L0.781828 5.15225C0.572971 5.14401 0.410451 4.96811 0.41861 4.7593L0.5748 0.789518C0.583039 0.580661 0.758938 0.418139 0.967749 0.426298L4.93753 0.582489C5.14639 0.590727 5.30896 0.766708 5.30075 0.975439Z" fill="#ff718d" />
        </svg>
        <svg class="confetti__item confetti__item--square" width="6" height="6" viewbox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M5.30075 0.975439L5.14456 4.94522C5.13632 5.15408 4.96042 5.3166 4.75161 5.30844L0.781828 5.15225C0.572971 5.14401 0.410451 4.96811 0.41861 4.7593L0.5748 0.789518C0.583039 0.580661 0.758938 0.418139 0.967749 0.426298L4.93753 0.582489C5.14639 0.590727 5.30896 0.766708 5.30075 0.975439Z" fill="#ff718d" />
        </svg>
        <svg class="confetti__item confetti__item--square" width="6" height="6" viewbox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M5.30075 0.975439L5.14456 4.94522C5.13632 5.15408 4.96042 5.3166 4.75161 5.30844L0.781828 5.15225C0.572971 5.14401 0.410451 4.96811 0.41861 4.7593L0.5748 0.789518C0.583039 0.580661 0.758938 0.418139 0.967749 0.426298L4.93753 0.582489C5.14639 0.590727 5.30896 0.766708 5.30075 0.975439Z" fill="#ff718d" />
        </svg>
      </div>

@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap");
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background: linear-gradient(#fff -100%, #888);
  font-family: "Arial Black", "Archivo Black", sans-serif;
  overflow: hidden;
  cursor: none;
}

.scratch-win {
  position: relative;
  padding: 1rem 2rem 2rem 2rem;
  background: linear-gradient(#78d6c6 -150%, #12486b);
  border: 0.2rem solid #ffdc73;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0.2rem 0.2rem 1rem 0 rgba(0, 0, 56, 0.3);
}
@media screen and (max-width: 500px) {
  .scratch-win {
    padding-left: 0;
    padding-right: 0;
  }
  .scratch-win__coin {
    transform: scale(0.8);
  }
}
.scratch-win:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(-70deg, transparent, transparent 50%, rgba(255, 255, 255, 0.1) 57%, transparent 60%);
  background-size: 300% 100%;
  animation: shinning;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  pointer-events: none;
}
@keyframes shinning {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 100% 0;
  }
}
.scratch-win__title {
  width: 100%;
  margin: 0 auto 1rem;
  color: #ffdc73;
  font-size: 2rem;
  text-align: center;
  text-transform: uppercase;
  background: -webkit-linear-gradient(#ffdc73, #a67c00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.scratch-win__scratcher {
  position: relative;
  width: 20rem;
  height: 10rem;
}
.scratch-win__background, .scratch-win__foreground {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.scratch-win__background {
  display: none;
  justify-content: center;
  align-items: center;
  color: #888;
  background-color: #fff;
  text-transform: uppercase;
  font-size: 3.6rem;
}
.scratch-win__background:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(transparent, transparent 0.5rem, #888 0.5rem, #888 0.6rem);
  opacity: 0.5;
}
.scratch-win--ready .scratch-win__background {
  display: flex;
}
.scratch-win__coin {
  position: absolute;
  z-index: 2;
  top: calc(var(--top) - 5rem);
  left: calc(var(--left) - 3rem);
  width: 6rem;
  height: 6rem;
  pointer-events: none;
}
.scratch-win__coin-side {
  position: absolute;
  top: -0.4rem;
  left: 0;
  z-index: -1;
  width: calc(100% + 0.6rem);
  height: calc(100% + 0.6rem);
  border-radius: 50%;
  outline: 0.1rem solid #a67c00;
  background: repeating-linear-gradient(90deg, #d4af37 0, #d4af37 0.5rem, #ffdc73 0.5rem, #ffdc73 0.7rem);
  box-shadow: 0 1rem 1rem -0.5rem rgba(0, 0, 56, 0.5);
}
@supports (-webkit-hyphens: none) {
  .scratch-win__coin-side {
    outline: none;
  }
}
.scratch-win__coin-base {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0.3rem dashed #d4af37;
  outline: 0.1rem solid #a67c00;
  border-radius: 50%;
  background: radial-gradient(circle at 0 0, #ffdc73, #d4af37 150%);
  box-shadow: inset 0 -0.1rem 0 0 #a67c00;
}
@supports (-webkit-hyphens: none) {
  .scratch-win__coin-base {
    outline: none;
  }
}
.scratch-win__coin-base:before, .scratch-win__coin-base:after {
  content: "€";
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  font-size: 4rem;
}
.scratch-win__coin-base:before {
  color: #a67c00;
  transform: rotate(45deg) translateX(-0.4rem) translateY(-0.25rem);
}
.scratch-win__coin-base:after {
  color: #d4af37;
  transform: rotate(45deg) translateX(-0.3rem) translateY(-0.2rem);
  background: -webkit-linear-gradient(#ffdc73 -50%, #d4af37);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.confetti {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 100%;
  height: 200%;
  pointer-events: none;
  --top-position: -350vh;
}
.confetti__item {
  position: absolute;
  box-shadow: 1rem 1rem 1rem 0 rgba(0, 0, 56, 0.5);
}
.confetti__item:nth-child(1) {
  top: calc(0.5404519712 * 150% + var(--top-position));
  left: calc(0.6506014204 * 100%);
  transform: scale(max(4.7946178021, 2)) rotate(61.2407111185deg);
}
.confetti__item:nth-child(2) {
  top: calc(0.3909313175 * 150% + var(--top-position));
  left: calc(0.7391782273 * 100%);
  transform: scale(max(4.2569375058, 2)) rotate(84.9558761747deg);
}
.confetti__item:nth-child(3) {
  top: calc(0.1138870664 * 150% + var(--top-position));
  left: calc(0.7254497993 * 100%);
  transform: scale(max(0.8302334279, 2)) rotate(86.8883842448deg);
}
.confetti__item:nth-child(4) {
  top: calc(0.9806803478 * 150% + var(--top-position));
  left: calc(0.777420714 * 100%);
  transform: scale(max(3.3776250875, 2)) rotate(43.6719320268deg);
}
.confetti__item:nth-child(5) {
  top: calc(0.1632114775 * 150% + var(--top-position));
  left: calc(0.1631848863 * 100%);
  transform: scale(max(3.0007258655, 2)) rotate(60.1129399957deg);
}
.confetti__item:nth-child(6) {
  top: calc(0.8892309505 * 150% + var(--top-position));
  left: calc(0.2897734714 * 100%);
  transform: scale(max(3.283128146, 2)) rotate(66.8518426878deg);
}
.confetti__item:nth-child(7) {
  top: calc(0.5077195683 * 150% + var(--top-position));
  left: calc(0.4478277333 * 100%);
  transform: scale(max(4.8589080842, 2)) rotate(50.8591043253deg);
}
.confetti__item:nth-child(8) {
  top: calc(0.2141277898 * 150% + var(--top-position));
  left: calc(0.9114337801 * 100%);
  transform: scale(max(0.8945148864, 2)) rotate(7.363273296deg);
}
.confetti__item:nth-child(9) {
  top: calc(0.7216475441 * 150% + var(--top-position));
  left: calc(0.1091409513 * 100%);
  transform: scale(max(3.271867644, 2)) rotate(81.5232041119deg);
}
.confetti__item:nth-child(10) {
  top: calc(0.6015615583 * 150% + var(--top-position));
  left: calc(0.0462595752 * 100%);
  transform: scale(max(4.2032851398, 2)) rotate(54.5981914046deg);
}
.confetti__item:nth-child(11) {
  top: calc(0.3827487326 * 150% + var(--top-position));
  left: calc(0.7102929271 * 100%);
  transform: scale(max(2.7130868257, 2)) rotate(20.5345525594deg);
}
.confetti__item:nth-child(12) {
  top: calc(0.733289579 * 150% + var(--top-position));
  left: calc(0.6444747149 * 100%);
  transform: scale(max(2.4023123964, 2)) rotate(64.8941953259deg);
}
.confetti__item:nth-child(13) {
  top: calc(0.6090678083 * 150% + var(--top-position));
  left: calc(0.9777901082 * 100%);
  transform: scale(max(4.9661604315, 2)) rotate(16.6160184428deg);
}
.confetti__item:nth-child(14) {
  top: calc(0.3388937557 * 150% + var(--top-position));
  left: calc(0.9730151682 * 100%);
  transform: scale(max(3.6601913457, 2)) rotate(20.7545200236deg);
}
.confetti__item:nth-child(15) {
  top: calc(0.3240714144 * 150% + var(--top-position));
  left: calc(0.2080727733 * 100%);
  transform: scale(max(3.5215633083, 2)) rotate(41.7903181471deg);
}
.confetti__item:nth-child(16) {
  top: calc(0.7991983297 * 150% + var(--top-position));
  left: calc(0.9420046279 * 100%);
  transform: scale(max(3.1101695507, 2)) rotate(26.2766054728deg);
}
.confetti__item:nth-child(17) {
  top: calc(0.9320516538 * 150% + var(--top-position));
  left: calc(0.1249295283 * 100%);
  transform: scale(max(0.2474230476, 2)) rotate(64.0929470123deg);
}
.confetti__item:nth-child(18) {
  top: calc(0.0740383118 * 150% + var(--top-position));
  left: calc(0.6006731258 * 100%);
  transform: scale(max(2.3501521055, 2)) rotate(31.3076633097deg);
}
.confetti__item:nth-child(19) {
  top: calc(0.0839332982 * 150% + var(--top-position));
  left: calc(0.9501939036 * 100%);
  transform: scale(max(3.3205016243, 2)) rotate(50.560839839deg);
}
.confetti__item:nth-child(20) {
  top: calc(0.1852994649 * 150% + var(--top-position));
  left: calc(0.4862716357 * 100%);
  transform: scale(max(0.9707935961, 2)) rotate(39.632151318deg);
}
.confetti__item:nth-child(21) {
  top: calc(0.5133191738 * 150% + var(--top-position));
  left: calc(0.7613170546 * 100%);
  transform: scale(max(2.9302643788, 2)) rotate(73.7860306218deg);
}
.confetti__item:nth-child(22) {
  top: calc(0.1031243099 * 150% + var(--top-position));
  left: calc(0.7231834473 * 100%);
  transform: scale(max(2.1761988387, 2)) rotate(5.555572089deg);
}
.confetti__item:nth-child(23) {
  top: calc(0.7176230059 * 150% + var(--top-position));
  left: calc(0.7294757954 * 100%);
  transform: scale(max(0.9424151417, 2)) rotate(85.8422809346deg);
}
.confetti__item:nth-child(24) {
  top: calc(0.0778979117 * 150% + var(--top-position));
  left: calc(0.5519244741 * 100%);
  transform: scale(max(3.9290120256, 2)) rotate(36.5021839801deg);
}
.confetti__item:nth-child(25) {
  top: calc(0.0215022895 * 150% + var(--top-position));
  left: calc(0.8169084763 * 100%);
  transform: scale(max(1.2953725992, 2)) rotate(22.0731712672deg);
}
.confetti__item:nth-child(26) {
  top: calc(0.2673152076 * 150% + var(--top-position));
  left: calc(0.8999647472 * 100%);
  transform: scale(max(3.6265296388, 2)) rotate(8.0624873302deg);
}
.confetti__item:nth-child(27) {
  top: calc(0.4190237882 * 150% + var(--top-position));
  left: calc(0.8559403538 * 100%);
  transform: scale(max(1.1905792651, 2)) rotate(6.6262896302deg);
}
.confetti__item:nth-child(28) {
  top: calc(0.4606476976 * 150% + var(--top-position));
  left: calc(0.9070355171 * 100%);
  transform: scale(max(1.1755136446, 2)) rotate(3.9735196246deg);
}
.confetti__item:nth-child(29) {
  top: calc(0.2990307826 * 150% + var(--top-position));
  left: calc(0.4274100922 * 100%);
  transform: scale(max(2.0053356474, 2)) rotate(21.0669369814deg);
}
.confetti__item:nth-child(30) {
  top: calc(0.1811240976 * 150% + var(--top-position));
  left: calc(0.5094617535 * 100%);
  transform: scale(max(4.8224957913, 2)) rotate(78.4617555562deg);
}
.confetti__item:nth-child(31) {
  top: calc(0.0297416313 * 150% + var(--top-position));
  left: calc(0.0060822603 * 100%);
  transform: scale(max(0.2245754316, 2)) rotate(14.3638529791deg);
}
.confetti__item:nth-child(32) {
  top: calc(0.5504680312 * 150% + var(--top-position));
  left: calc(0.6538328997 * 100%);
  transform: scale(max(3.7357530482, 2)) rotate(25.6006048276deg);
}
.confetti__item:nth-child(33) {
  top: calc(0.8804217315 * 150% + var(--top-position));
  left: calc(0.4592748878 * 100%);
  transform: scale(max(3.8308419679, 2)) rotate(72.2440068576deg);
}
.confetti__item:nth-child(34) {
  top: calc(0.9485600497 * 150% + var(--top-position));
  left: calc(0.8265742305 * 100%);
  transform: scale(max(1.8197151935, 2)) rotate(85.854200491deg);
}
.confetti__item:nth-child(35) {
  top: calc(0.972057535 * 150% + var(--top-position));
  left: calc(0.8189523605 * 100%);
  transform: scale(max(3.4173008975, 2)) rotate(19.0470988554deg);
}
.confetti__item:nth-child(36) {
  top: calc(0.4660158409 * 150% + var(--top-position));
  left: calc(0.7836876661 * 100%);
  transform: scale(max(1.242470444, 2)) rotate(6.9655561979deg);
}
.confetti__item:nth-child(37) {
  top: calc(0.7127843686 * 150% + var(--top-position));
  left: calc(0.6038966632 * 100%);
  transform: scale(max(3.4711698381, 2)) rotate(73.6591456077deg);
}
.confetti__item:nth-child(38) {
  top: calc(0.6354896009 * 150% + var(--top-position));
  left: calc(0.3285546686 * 100%);
  transform: scale(max(2.5445297103, 2)) rotate(89.1813701924deg);
}
.confetti__item:nth-child(39) {
  top: calc(0.7070167728 * 150% + var(--top-position));
  left: calc(0.5259211435 * 100%);
  transform: scale(max(0.8744055745, 2)) rotate(10.3965717164deg);
}
.confetti__item:nth-child(40) {
  top: calc(0.8847006255 * 150% + var(--top-position));
  left: calc(0.7959972799 * 100%);
  transform: scale(max(2.8370289341, 2)) rotate(62.8990664141deg);
}
.confetti__item:nth-child(41) {
  top: calc(0.2258203783 * 150% + var(--top-position));
  left: calc(0.6016582451 * 100%);
  transform: scale(max(0.4275564621, 2)) rotate(0.0944412354deg);
}
.confetti__item:nth-child(42) {
  top: calc(0.3695389861 * 150% + var(--top-position));
  left: calc(0.0324006026 * 100%);
  transform: scale(max(2.6625292714, 2)) rotate(50.404930755deg);
}
.confetti__item:nth-child(43) {
  top: calc(0.1182130645 * 150% + var(--top-position));
  left: calc(0.3697522412 * 100%);
  transform: scale(max(2.6540695295, 2)) rotate(85.3287739116deg);
}
.confetti__item:nth-child(44) {
  top: calc(0.1194678647 * 150% + var(--top-position));
  left: calc(0.3698543901 * 100%);
  transform: scale(max(1.1152651746, 2)) rotate(36.2443578526deg);
}
.confetti__item:nth-child(45) {
  top: calc(0.4543513461 * 150% + var(--top-position));
  left: calc(0.296554722 * 100%);
  transform: scale(max(3.4582290396, 2)) rotate(4.0319925477deg);
}
.confetti__item:nth-child(46) {
  top: calc(0.4039640075 * 150% + var(--top-position));
  left: calc(0.1293177392 * 100%);
  transform: scale(max(2.0365614775, 2)) rotate(7.3947897511deg);
}
.confetti__item:nth-child(47) {
  top: calc(0.1181602179 * 150% + var(--top-position));
  left: calc(0.5502637836 * 100%);
  transform: scale(max(1.6946528949, 2)) rotate(16.9628789803deg);
}
.confetti__item:nth-child(48) {
  top: calc(0.1070648648 * 150% + var(--top-position));
  left: calc(0.7994123698 * 100%);
  transform: scale(max(1.6244784111, 2)) rotate(36.0561093743deg);
}
.confetti__item:nth-child(49) {
  top: calc(0.2527904286 * 150% + var(--top-position));
  left: calc(0.3407409206 * 100%);
  transform: scale(max(4.0319966385, 2)) rotate(26.3537960575deg);
}
.confetti__item:nth-child(50) {
  top: calc(0.7994635022 * 150% + var(--top-position));
  left: calc(0.3216456158 * 100%);
  transform: scale(max(0.2701905816, 2)) rotate(46.8300589194deg);
}
.confetti__item:nth-child(51) {
  top: calc(0.4019104905 * 150% + var(--top-position));
  left: calc(0.4424571681 * 100%);
  transform: scale(max(1.0604090288, 2)) rotate(77.0646566063deg);
}
.confetti__item:nth-child(52) {
  top: calc(0.8539303356 * 150% + var(--top-position));
  left: calc(0.682228957 * 100%);
  transform: scale(max(0.978521868, 2)) rotate(48.6130545231deg);
}
.confetti__item:nth-child(53) {
  top: calc(0.0809689507 * 150% + var(--top-position));
  left: calc(0.3410146509 * 100%);
  transform: scale(max(2.5751744215, 2)) rotate(78.6706285455deg);
}
.confetti__item:nth-child(54) {
  top: calc(0.8044742794 * 150% + var(--top-position));
  left: calc(0.5191413145 * 100%);
  transform: scale(max(0.1575352275, 2)) rotate(60.2553658381deg);
}
.confetti__item:nth-child(55) {
  top: calc(0.220786919 * 150% + var(--top-position));
  left: calc(0.0703644157 * 100%);
  transform: scale(max(2.7191857289, 2)) rotate(1.8131154621deg);
}
.confetti__item:nth-child(56) {
  top: calc(0.1433399405 * 150% + var(--top-position));
  left: calc(0.1505664693 * 100%);
  transform: scale(max(1.5413303972, 2)) rotate(70.6845184273deg);
}
.confetti__item:nth-child(57) {
  top: calc(0.4948810621 * 150% + var(--top-position));
  left: calc(0.4803654353 * 100%);
  transform: scale(max(1.2515951795, 2)) rotate(65.0339395675deg);
}
.confetti__item:nth-child(58) {
  top: calc(0.6215596162 * 150% + var(--top-position));
  left: calc(0.0168572024 * 100%);
  transform: scale(max(4.1262074002, 2)) rotate(67.047891276deg);
}
.confetti__item:nth-child(59) {
  top: calc(0.7733885025 * 150% + var(--top-position));
  left: calc(0.0208591261 * 100%);
  transform: scale(max(1.5699437652, 2)) rotate(18.3452837628deg);
}
.confetti__item:nth-child(60) {
  top: calc(0.8070138848 * 150% + var(--top-position));
  left: calc(0.1096675853 * 100%);
  transform: scale(max(1.7828193535, 2)) rotate(14.1029416471deg);
}
.confetti__item:nth-child(61) {
  top: calc(0.3243794615 * 150% + var(--top-position));
  left: calc(0.0620556145 * 100%);
  transform: scale(max(2.8306561138, 2)) rotate(22.8226034976deg);
}
.confetti__item:nth-child(62) {
  top: calc(0.050125596 * 150% + var(--top-position));
  left: calc(0.1071394489 * 100%);
  transform: scale(max(2.9300698678, 2)) rotate(89.2720961045deg);
}
.confetti__item:nth-child(63) {
  top: calc(0.8257120142 * 150% + var(--top-position));
  left: calc(0.4813325568 * 100%);
  transform: scale(max(0.3734432051, 2)) rotate(29.4987655908deg);
}
.confetti__item:nth-child(64) {
  top: calc(0.8839167149 * 150% + var(--top-position));
  left: calc(0.0271647213 * 100%);
  transform: scale(max(0.6535355882, 2)) rotate(8.8040425759deg);
}
.confetti__item:nth-child(65) {
  top: calc(0.5506318092 * 150% + var(--top-position));
  left: calc(0.7035117726 * 100%);
  transform: scale(max(0.4798323673, 2)) rotate(24.1570891915deg);
}
.confetti__item:nth-child(66) {
  top: calc(0.7684554515 * 150% + var(--top-position));
  left: calc(0.1141891117 * 100%);
  transform: scale(max(0.1140987043, 2)) rotate(36.3665002424deg);
}
.confetti__item:nth-child(67) {
  top: calc(0.3382562072 * 150% + var(--top-position));
  left: calc(0.2968004886 * 100%);
  transform: scale(max(2.8440836373, 2)) rotate(68.29338771deg);
}
.confetti__item:nth-child(68) {
  top: calc(0.5059454813 * 150% + var(--top-position));
  left: calc(0.5873114819 * 100%);
  transform: scale(max(4.7158896333, 2)) rotate(36.9491785763deg);
}
.confetti__item:nth-child(69) {
  top: calc(0.3122096555 * 150% + var(--top-position));
  left: calc(0.3038858928 * 100%);
  transform: scale(max(0.0104570451, 2)) rotate(46.3053861568deg);
}
.confetti__item:nth-child(70) {
  top: calc(0.3648209325 * 150% + var(--top-position));
  left: calc(0.3417956035 * 100%);
  transform: scale(max(0.6378586094, 2)) rotate(81.0607506123deg);
}
.confetti__item:nth-child(71) {
  top: calc(0.9843420242 * 150% + var(--top-position));
  left: calc(0.9004346215 * 100%);
  transform: scale(max(3.9785467619, 2)) rotate(60.4545399403deg);
}
.confetti__item:nth-child(72) {
  top: calc(0.1140639813 * 150% + var(--top-position));
  left: calc(0.3195441031 * 100%);
  transform: scale(max(0.0969393738, 2)) rotate(87.4457288987deg);
}
.confetti__item:nth-child(73) {
  top: calc(0.4444932452 * 150% + var(--top-position));
  left: calc(0.5698287932 * 100%);
  transform: scale(max(1.1337935043, 2)) rotate(30.5398248452deg);
}
.confetti__item:nth-child(74) {
  top: calc(0.5868588109 * 150% + var(--top-position));
  left: calc(0.4330587337 * 100%);
  transform: scale(max(2.9319098196, 2)) rotate(79.7715794078deg);
}
.confetti__item:nth-child(75) {
  top: calc(0.9174681643 * 150% + var(--top-position));
  left: calc(0.2534077086 * 100%);
  transform: scale(max(1.6753160948, 2)) rotate(15.3271748989deg);
}
.confetti__item:nth-child(76) {
  top: calc(0.514444759 * 150% + var(--top-position));
  left: calc(0.3126263956 * 100%);
  transform: scale(max(0.5719600966, 2)) rotate(47.1774687198deg);
}
.confetti__item:nth-child(77) {
  top: calc(0.8618144703 * 150% + var(--top-position));
  left: calc(0.7833493743 * 100%);
  transform: scale(max(4.760140124, 2)) rotate(29.1942508988deg);
}
.confetti__item:nth-child(78) {
  top: calc(0.192888476 * 150% + var(--top-position));
  left: calc(0.7940993958 * 100%);
  transform: scale(max(2.2754612907, 2)) rotate(25.4702350008deg);
}
.confetti__item:nth-child(79) {
  top: calc(0.8006995472 * 150% + var(--top-position));
  left: calc(0.8679203829 * 100%);
  transform: scale(max(0.4445642327, 2)) rotate(27.6858636354deg);
}
.confetti__item:nth-child(80) {
  top: calc(0.9894210065 * 150% + var(--top-position));
  left: calc(0.0602900922 * 100%);
  transform: scale(max(4.1221071062, 2)) rotate(32.397335183deg);
}
.confetti__item:nth-child(81) {
  top: calc(0.5378028149 * 150% + var(--top-position));
  left: calc(0.4177548605 * 100%);
  transform: scale(max(4.9496156681, 2)) rotate(53.0777514557deg);
}
.confetti__item:nth-child(82) {
  top: calc(0.5516430249 * 150% + var(--top-position));
  left: calc(0.0399736891 * 100%);
  transform: scale(max(2.2683137356, 2)) rotate(1.1626463012deg);
}
.confetti__item:nth-child(83) {
  top: calc(0.8575016073 * 150% + var(--top-position));
  left: calc(0.6966277437 * 100%);
  transform: scale(max(3.1755678618, 2)) rotate(27.7352360603deg);
}
.confetti__item:nth-child(84) {
  top: calc(0.0247286928 * 150% + var(--top-position));
  left: calc(0.5226350446 * 100%);
  transform: scale(max(1.154895855, 2)) rotate(33.8381574489deg);
}
.confetti__item:nth-child(85) {
  top: calc(0.601984445 * 150% + var(--top-position));
  left: calc(0.5271783738 * 100%);
  transform: scale(max(0.7724828911, 2)) rotate(67.1693278206deg);
}
.confetti__item:nth-child(86) {
  top: calc(0.7696363788 * 150% + var(--top-position));
  left: calc(0.4611916611 * 100%);
  transform: scale(max(0.0558183757, 2)) rotate(57.8046707338deg);
}
.confetti__item:nth-child(87) {
  top: calc(0.6525928279 * 150% + var(--top-position));
  left: calc(0.2934095461 * 100%);
  transform: scale(max(0.6122141782, 2)) rotate(58.8269585911deg);
}
.confetti__item:nth-child(88) {
  top: calc(0.5078686235 * 150% + var(--top-position));
  left: calc(0.8741478232 * 100%);
  transform: scale(max(2.2337634479, 2)) rotate(88.2704186933deg);
}
.confetti__item:nth-child(89) {
  top: calc(0.5768513497 * 150% + var(--top-position));
  left: calc(0.6847880554 * 100%);
  transform: scale(max(2.547293153, 2)) rotate(31.6791250605deg);
}
.confetti__item:nth-child(90) {
  top: calc(0.5078868125 * 150% + var(--top-position));
  left: calc(0.2687551614 * 100%);
  transform: scale(max(2.332309302, 2)) rotate(28.7064211909deg);
}
.confetti__item:nth-child(91) {
  top: calc(0.0389760039 * 150% + var(--top-position));
  left: calc(0.1773495578 * 100%);
  transform: scale(max(0.1437545655, 2)) rotate(80.9567906724deg);
}
.confetti__item:nth-child(92) {
  top: calc(0.0645679861 * 150% + var(--top-position));
  left: calc(0.5421916084 * 100%);
  transform: scale(max(4.2084290394, 2)) rotate(51.9159772941deg);
}
.confetti__item:nth-child(93) {
  top: calc(0.4347301033 * 150% + var(--top-position));
  left: calc(0.4565635488 * 100%);
  transform: scale(max(0.8517044935, 2)) rotate(38.3513667321deg);
}
.confetti__item:nth-child(94) {
  top: calc(0.2866052378 * 150% + var(--top-position));
  left: calc(0.3301082465 * 100%);
  transform: scale(max(2.3153420802, 2)) rotate(13.3786548867deg);
}
.confetti__item:nth-child(95) {
  top: calc(0.7767523728 * 150% + var(--top-position));
  left: calc(0.7315190575 * 100%);
  transform: scale(max(1.5467728364, 2)) rotate(27.8379578433deg);
}
.confetti__item:nth-child(96) {
  top: calc(0.8045021651 * 150% + var(--top-position));
  left: calc(0.9733951724 * 100%);
  transform: scale(max(2.3723204753, 2)) rotate(70.2923435226deg);
}
.confetti__item:nth-child(97) {
  top: calc(0.1470932344 * 150% + var(--top-position));
  left: calc(0.3979296432 * 100%);
  transform: scale(max(2.7162502972, 2)) rotate(71.9267191981deg);
}
.confetti__item:nth-child(98) {
  top: calc(0.5271188387 * 150% + var(--top-position));
  left: calc(0.0665654687 * 100%);
  transform: scale(max(2.5146991555, 2)) rotate(1.5369227634deg);
}
.confetti__item:nth-child(99) {
  top: calc(0.1345864684 * 150% + var(--top-position));
  left: calc(0.7342625824 * 100%);
  transform: scale(max(1.4689217944, 2)) rotate(60.8556679471deg);
}
.confetti__item:nth-child(100) {
  top: calc(0.5179964404 * 150% + var(--top-position));
  left: calc(0.5483495958 * 100%);
  transform: scale(max(1.625910019, 2)) rotate(26.0672476949deg);
}
.confetti__item:nth-child(101) {
  top: calc(0.78547907 * 150% + var(--top-position));
  left: calc(0.5886577786 * 100%);
  transform: scale(max(0.7867631128, 2)) rotate(56.7323912531deg);
}
.confetti__item:nth-child(102) {
  top: calc(0.8282344018 * 150% + var(--top-position));
  left: calc(0.9655042361 * 100%);
  transform: scale(max(0.8688933014, 2)) rotate(58.4460263359deg);
}
.confetti__item:nth-child(103) {
  top: calc(0.3305069339 * 150% + var(--top-position));
  left: calc(0.4880394747 * 100%);
  transform: scale(max(1.4981164896, 2)) rotate(83.7293908832deg);
}
.confetti__item:nth-child(104) {
  top: calc(0.6266839763 * 150% + var(--top-position));
  left: calc(0.1088131408 * 100%);
  transform: scale(max(3.3957738206, 2)) rotate(84.374199108deg);
}
.confetti__item:nth-child(105) {
  top: calc(0.8539957423 * 150% + var(--top-position));
  left: calc(0.7410817893 * 100%);
  transform: scale(max(4.2525307801, 2)) rotate(16.5634699332deg);
}
.confetti__item:nth-child(106) {
  top: calc(0.2941480289 * 150% + var(--top-position));
  left: calc(0.8635663923 * 100%);
  transform: scale(max(3.7078935921, 2)) rotate(51.4825660389deg);
}
.confetti__item:nth-child(107) {
  top: calc(0.7142502492 * 150% + var(--top-position));
  left: calc(0.7176060971 * 100%);
  transform: scale(max(1.771506285, 2)) rotate(76.4745019029deg);
}
.confetti__item:nth-child(108) {
  top: calc(0.0333464186 * 150% + var(--top-position));
  left: calc(0.6350381558 * 100%);
  transform: scale(max(4.8166259297, 2)) rotate(36.1770901562deg);
}
.confetti__item:nth-child(109) {
  top: calc(0.2189036155 * 150% + var(--top-position));
  left: calc(0.7841385249 * 100%);
  transform: scale(max(4.6120733688, 2)) rotate(19.0585656832deg);
}
.confetti__item:nth-child(110) {
  top: calc(0.3880562565 * 150% + var(--top-position));
  left: calc(0.2761869789 * 100%);
  transform: scale(max(4.8770403032, 2)) rotate(76.0228522177deg);
}
.confetti__item:nth-child(111) {
  top: calc(0.584760489 * 150% + var(--top-position));
  left: calc(0.1127448919 * 100%);
  transform: scale(max(2.6069170518, 2)) rotate(64.3479986679deg);
}
.confetti__item:nth-child(112) {
  top: calc(0.7552652498 * 150% + var(--top-position));
  left: calc(0.8658334433 * 100%);
  transform: scale(max(2.5508908145, 2)) rotate(22.3066489528deg);
}
.confetti__item:nth-child(113) {
  top: calc(0.737496037 * 150% + var(--top-position));
  left: calc(0.4828021972 * 100%);
  transform: scale(max(0.0410638873, 2)) rotate(9.9304218016deg);
}
.confetti__item:nth-child(114) {
  top: calc(0.1225562018 * 150% + var(--top-position));
  left: calc(0.1964117674 * 100%);
  transform: scale(max(0.5722523861, 2)) rotate(16.9999815261deg);
}
.confetti__item:nth-child(115) {
  top: calc(0.7509680908 * 150% + var(--top-position));
  left: calc(0.5820044439 * 100%);
  transform: scale(max(2.5324611864, 2)) rotate(14.8333158837deg);
}
.confetti__item:nth-child(116) {
  top: calc(0.1497713715 * 150% + var(--top-position));
  left: calc(0.5276296372 * 100%);
  transform: scale(max(0.6094591283, 2)) rotate(58.718536162deg);
}
.confetti__item:nth-child(117) {
  top: calc(0.5001649051 * 150% + var(--top-position));
  left: calc(0.7256533047 * 100%);
  transform: scale(max(3.1949744242, 2)) rotate(75.9852514698deg);
}
.confetti__item:nth-child(118) {
  top: calc(0.1490632892 * 150% + var(--top-position));
  left: calc(0.7713768536 * 100%);
  transform: scale(max(0.7360260351, 2)) rotate(1.2401235003deg);
}
.confetti__item:nth-child(119) {
  top: calc(0.8479656976 * 150% + var(--top-position));
  left: calc(0.5828052605 * 100%);
  transform: scale(max(1.9892139221, 2)) rotate(74.4327178501deg);
}
.confetti__item:nth-child(120) {
  top: calc(0.0140199595 * 150% + var(--top-position));
  left: calc(0.3814688132 * 100%);
  transform: scale(max(4.9681071109, 2)) rotate(22.1112581067deg);
}
.confetti--active {
  --top-position: 200vh;
}
.confetti--active .confetti__item {
  transition: top 10s ease;
}
.confetti--active .confetti__item:nth-child(3n) {
  transition: top 8s ease;
}
.confetti--active .confetti__item:nth-child(4n) {
  transition: top 12s ease;
}

const scratchWin = document.getElementById("scratch-win");
const coin = document.getElementById("coin");
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

const width = 320;
const height = 160;

// Paint golden gradient
canvas.width = width;
canvas.height = height;

const gradient = ctx.createLinearGradient(0, 0, width, height);

gradient.addColorStop(0, "#d4af37");
gradient.addColorStop(0.3, "#a67c00");
gradient.addColorStop(0.5, "#d4af37");
gradient.addColorStop(0.8, "#a67c00");
gradient.addColorStop(1, "#d4af37");

ctx.fillStyle = gradient;
ctx.fillRect(0, 0, width, height);

scratchWin.classList.add("scratch-win--ready");

// Calculate transparency
const confetti = document.getElementById("confetti");
const maxPixels = width * height;

const calculateTransparency = () => {
  const imageData = ctx.getImageData(0, 0, width, height).data;
  const alphaValues = imageData.filter(
    (value, index) => index % 4 === 4 - 1 && value === 0
  );

  return alphaValues.length / maxPixels;
};

const mouseFunction = (mouse) => {
  // Move coin
  const clientX = mouse.clientX ? mouse.clientX : mouse.touches[0].clientX;
  const clientY = mouse.clientY ? mouse.clientY : mouse.touches[0].clientY;
  coin.style = `--top: ${clientY}px; --left: ${clientX}px;`;
  // Scratch
  const canvasPosition = canvas.getBoundingClientRect();
  const canvasX = clientX - canvasPosition.left;
  const canvasY = clientY - canvasPosition.top;

  if (canvasX > 0 && canvasX < width && canvasY > 0 && canvasY < height) {
    ctx.clearRect(canvasX - 10, canvasY - 10, 20, 20);

    if (calculateTransparency() > 0.6) {
      confetti.classList.add("confetti--active");
    }
  }
};

// In a real life example you should throttle these
window.addEventListener("mousemove", mouseFunction);
window.addEventListener("touchmove", mouseFunction);
    container.classList.remove('container--running');
  }

})();