* {
    -webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */
    -webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */
  /* make transparent link selection, adjust last value opacity 0 to 1.0 */
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */
   /* -webkit-tap-highlight-color: rgba(0,0,0,0); */
  }

.container-zdrapka {
    position: relative;
    display:block;
    height:350px;
    max-width: 850px;
    width:100%;
    border-radius:80px;
  }

  #zdrapka-front {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 100;
    border-radius:80px;
  }

  #zdrapka-back {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 2;
    border-radius:80px;
    width:100%;
    height:100%;
    background: #e2d8b0;
  }

/* Element z gratulacjami */
.ezdrapka-gratulacje {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    z-index: 1000;
}

/* Domyślne style dla tekstu gratulacji */
.ezdrapka-gratulacje {
    color: #FFD700;
    font-size: 48px;
    font-family: Arial, sans-serif;
    font-weight: 900;
    color: var(--red);
}

/* Style dla elementów HTML w gratulacjach */
.ezdrapka-gratulacje h1,
.ezdrapka-gratulacje h2,
.ezdrapka-gratulacje h3,
.ezdrapka-gratulacje p {
    margin: 0;
    padding: 0;
}

/* Możliwość dodania animacji */
.ezdrapka-gratulacje {
    animation: fadeIn 0.5s ease-in-out;
}
/* Stylowanie grafiki nagrody */
.ezdrapka-gratulacje img{
  max-height:90%;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}
.box-konto-zdrapki{
  position:relative;
}
#ezdrapka-loader{
  display:none;
  position:absolute;
  top:0;
  left:0;
  width: 100%;
  height:100%;
  background:rgba(255,255,255,0.5);
  z-index:100;
}
.loader {
  position:absolute;
  top:50%;
  left:50%;
  margin-left:-50px;
  margin-top:-60px;
  width: 100px;
  --b: 12px; 
  aspect-ratio: 1;
  border-radius: 50%;
  padding: 1px;
  background: conic-gradient(#0000 10%,#ed1b35) content-box;
  -webkit-mask:
    repeating-conic-gradient(#0000 0deg,#000 1deg 20deg,#0000 21deg 36deg),
    radial-gradient(farthest-side,#0000 calc(100% - var(--b) - 1px),#000 calc(100% - var(--b)));
  -webkit-mask-composite: destination-in;
          mask-composite: intersect;
  animation:loader 1s infinite steps(10);
}
@keyframes loader {to{transform: rotate(1turn)}}