/* ----------------------------- ROOT VARIABLES ----------------------------- */

:root {

}

.kaleidoscope.preview { background: url('../gfx/bg_001_preview.jpg') center center; background-size: cover; filter: blur(20px); }
.kaleidoscope{ width: 100vw; height: 100vh; position: fixed; left: 0; top: 0; z-index: -100; }
.kaleidoscope.container { background: url('../gfx/bg_001.jpg') center; background-size: cover;opacity: 0; transition: opacity ease-in-out; }
.kaleidoscope.container.is-visible { opacity: 1; }
.kaleidoscope.container canvas {mixBlendMode: 'plus-lighter'}

/* --------------------------------- LAYOUT --------------------------------- */

.disableUserAction {pointer-events: none; user-select: none;}
body {background: #000;}

#container {min-width: 320px; max-width: 1240px; height: 100%; position: relative; margin: 0 auto; display: flex; flex-direction: column; padding: 1rem; }

#bg {background: url("../gfx/bg_001.jpg") no-repeat center top; background-size: cover; left: 0; right: 0; position: absolute; height: 100%; bottom: 0;}

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

header { flex: 2; min-height: 120px; display: flex; justify-content: center; align-items: center; z-index: 100; }

#headerImg { max-width: 100%; height: 100%; position: relative; display: flex; justify-content: center; align-items: center; z-index: -5; overflow: hidden; }

#headerImg img { width: clamp(300px, 100%, 640px); max-height: 100%; }
#headerImg img.glow { position: absolute; mix-blend-mode: screen; }

/* ----------------------------- CONTENT BLOCK ------------------------------ */

main { flex: 6; min-height: 300px; display: flex; justify-content: center; align-items: center; }

#giftboxHolder { width: auto; height: 100%; max-width: 75%; max-height: 100%; position: relative; display: flex; justify-content: center; align-items: center; }
#giftboxHolder .bg { background: url('../gfx/giftbox_bg_001.png') center no-repeat; background-size: 100% 100%; width: 200%; height: 100%; position: absolute; top: 25%; }
#giftboxHolder .giftbox { cursor: pointer; }
#giftboxHolder .giftbox img { height: 100%; width: 100%; object-fit: contain; scale: 0.66; }

/* -------------------------------- FOOTER ---------------------------------- */

footer { min-height: fit-content; display: flex; flex; justify-content: center; align-items: center;}

/* ----------------------------- lights start ------------------------------- */

.lights { position: absolute; width: 100%; height: 100%; scale: 0.75; z-index: -1; transition: 1s; opacity: 1; display: flex; align-items: center; justify-content: center;}
.lights .light { background-size: 100%; width: 100%; aspect-ratio: 1; position: absolute; mix-blend-mode: screen; animation: flamesRotate 20s linear infinite;}
.lights .type-001  { background-image: url(../sprites/type_001.png); }
.lights .type-002  { background-image: url(../sprites/type_002.png); }
.lights .type-003  { background-image: url(../sprites/type_003.png); }
.lights .type-004  { background-image: url(../sprites/type_004.png); }
.lights .type-005  { background-image: url(../sprites/type_005.png); }
.lights .type-006  { background-image: url(../sprites/type_006.png); }
.lights .type-007  { background-image: url(../sprites/type_007.png); }
.lights .type-008  { background-image: url(../sprites/type_008.png); }
.lights .type-009  { background-image: url(../sprites/type_009.png); }
.lights .type-010  { background-image: url(../sprites/type_010.png); }
.lights .type-011  { background-image: url(../sprites/type_011.png); }
.lights .size-1 {scale: 1.2; animation-duration: 20s;}
.lights .size-2 {scale: 1.4; animation-duration: 30s;}
.lights .size-3 {scale: 2.8; animation-duration: 40s; opacity: 0.33;}



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

.layer.l1.animate {
  animation-duration: 1s;
}
.layer.l2.animate {
  animation-duration: 2s;
}
.layer.l3.animate {
  animation-duration: 3s;
}

.lights { transition: 1s; opacity: 1;}

.lights.out {
  opacity: 0;
  margin-top: 100px;
}

.giftbox.wrapper {width: 100%; height: 100%; transition: 1s; opacity: 1; transform: translateY(0); display: flex; justify-content: center; align-items: center;}
.giftbox.wrapper.out {opacity: 0; transform: translateY(-500px);}


.extraspins {color: #223366;
    background: #fff8;
    padding: 0.5rem;
    display: inline;
    align-items: center;
    border-radius: 0.33rem;
    margin-bottom: 0.5rem;
    font-weight: bold;
    text-align: center;}
.extraspins strong {color: #809;}
.extraspins a {background: #048;
    padding: 0.4rem 0.5rem;
    color: #fff;
    text-decoration: none;
    border-radius: 0.25rem;
    display: inline-flex
;}

/* ---------------------------- STRUCTURE BLOCK ----------------------------- */


/* ---------------------------- EDIT PAGE BLOCK ----------------------------- */


/* -------------------------------- OTHER ----------------------------------- */

/*.socialPost img {width: 2rem;}*/

.button {text-decoration: none; font-weight: normal; display: inline-block;}

.gba01 {animation: gba01 3s linear; animation-fill-mode: forwards;}

.speedUp.a0 {animation-duration: 50s!important;}
.speedUp.a1 {animation-duration: 30s!important;}
.speedUp.a2 {animation-duration: 20s!important;}
.speedUp.a3 {animation-duration: 10s!important;}

@keyframes gba01 {
  0% {}
  5% {transform: scale(.66);}
  90% {transform: scale(.66); opacity: 1;}
  100% {transform: scale(1.25); opacity: 0;}
}

.default .window .content {font-size: 1.5rem; text-align: center;}
.default .window .content strong {font-weight: bold; color: #fd0;}
.alerter .window .content {font-size: 1.5rem; text-align: center;}

@media screen and (max-width: 600px) {
   .socialBlock {flex-direction: column; gap: 0.5rem;}
}

/*.transition.grayscale {filter: grayscale(0%); opacity: 1;}
.transition.grayscale.active {filter: grayscale(100%); opacity: 0.5;}*/

@keyframes floating {
  0% {transform: translateY(0);}
  50% {transform: translateY(-10px);}
  100% {transform: translateY(0);}
}

.floating {animation: floating 2s ease-in-out infinite;}

.zoom{display: inline-block; transition: transform 0.3s ease-in-out;}
.zoom:hover {transform: scale(1.2);}
.zoom:active {transform: scale(1);}

.transition.zoomOut {
    transform: scale(0.6);
}

.transition.zoomOut.active {
    transform: scale(0.433);
}


/*.popup.default .window {background: radial-gradient(ellipse at top, #00d750, #008093 33%, #461f91 66%, transparent 100%), #6b0047dd; color: #fff;}*/

.popup.default .window {background: radial-gradient(ellipse at top, #07b, #048, #0140 50%) center 0, radial-gradient(ellipse at bottom, #816, #406, #014 60%) center bottom; background-size: 200% 100%; background-repeat: no-repeat;}
.popup.default.purple .window {background: radial-gradient(ellipse at top, #d08, #606, #0140 100%) center 0, radial-gradient(ellipse at bottom, #d08, #606, #014 100%) center bottom; }
.button { box-shadow: 0 5px 20px #0008; }



h2 {font-size: 1.5rem;
    margin: 0 auto 1.5rem auto;
    display: flex;
    justify-content: center;
    align-items: center;
    /* background: #0006; */
    padding: 0.5rem;
    border-radius: 0.33rem;
    width: fit-content;}

h2 span {margin: 0 0.5rem;}

.milnik {background: #0005;
    color: #4ff!important;
    padding: 0.25rem 0.5rem;
    border-radius: 0.33rem;
    margin-bottom: .5rem;
    display: inline-block;
}

#newsletter {width: 100%; min-height: fit-content; display: flex; justify-content: center; align-items: center; padding: 0 1rem; /* height: auto; min-height: fit-content; */}

.popupOnTop {z-index: 6000!important;}

.newsletter-registration {max-width: 100%; object-fit: contain; cursor: pointer;}
.newsletter-registration.long {display: block; max-width: 512px;}
.newsletter-registration.short {display: none; width: 100%; max-width: 350px;}

.popup .newsletter-registration {margin-top: 1rem}

@media (max-width: 560px) {
  .newsletter-registration.long {display: none;}
  .newsletter-registration.short {display: block;}
}

[data-copytoclipboard] { color: #4f0; font-weight: bold; }

strong.conic {
  --yellow-text: #ff0;
  --yellow-1: #f80;
  --yellow-2: #903;
  --blue-text: #aff;
  --blue-1: #06f;
  --blue-2: #029;
  --purple-text: #df8;
  --purple-1: #f0d;
  --purple-2: #a06;
}

strong.conic {padding: 0.25rem 0.75rem; border-radius: 0.25rem; position: relative; display: inline-block; overflow: hidden;}
strong.conic:after {content: '';
  animation: yellow 10s infinite linear;
  position: absolute;
  min-width: 150%;
  min-height: 150%;
  aspect-ratio: 1;
  left: 0;
  top: 50%;
  margin-top: -75%;
  margin-left: -25.5%;
  z-index: -1;
}

strong.conic.yellow { color: var(--yellow-text) !important; }
strong.conic.yellow:after { background: conic-gradient( var(--yellow-1), var(--yellow-2), var(--yellow-1), var(--yellow-2), var(--yellow-1), var(--yellow-2), var(--yellow-1), var(--yellow-2), var(--yellow-1), var(--yellow-2), var(--yellow-1), var(--yellow-2), var(--yellow-1), var(--yellow-2), var(--yellow-1), var(--yellow-2), var(--yellow-1), var(--yellow-2), var(--yellow-1) ); }

strong.conic.blue { color: var(--blue-text) !important; }
strong.conic.blue:after { background: conic-gradient( var(--blue-1), var(--blue-2), var(--blue-1), var(--blue-2), var(--blue-1), var(--blue-2), var(--blue-1), var(--blue-2), var(--blue-1), var(--blue-2), var(--blue-1), var(--blue-2), var(--blue-1), var(--blue-2), var(--blue-1), var(--blue-2), var(--blue-1), var(--blue-2), var(--blue-1) );}

strong.conic.purple { color: var(--purple-text) !important; }
strong.conic.purple:after { background: conic-gradient( var(--purple-1), var(--purple-2), var(--purple-1), var(--purple-2), var(--purple-1), var(--purple-2), var(--purple-1), var(--purple-2), var(--purple-1), var(--purple-2), var(--purple-1), var(--purple-2), var(--purple-1), var(--purple-2), var(--purple-1), var(--purple-2), var(--purple-1), var(--purple-2), var(--purple-1) );}

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