@-webkit-keyframes animLand {
   0% { background-position: 0px 0px; }
   100% { background-position: -335px 0px; }
}
@-moz-keyframes animLand {
   0% { background-position: 0px 0px; }
   100% { background-position: -335px 0px; }
}
@-o-keyframes animLand {
   0% { background-position: 0px 0px; }
   100% { background-position: -335px 0px; }
}
@keyframes animLand {
   0% { background-position: 0px 0px; }
   100% { background-position: -335px 0px; }
}

@-webkit-keyframes animSky {
   0% { background-position: 0px 100%; }
   100% { background-position: -275px 100%; }
}
@-moz-keyframes animSky {
   0% { background-position: 0px 100%; }
   100% { background-position: -275px 100%; }
}
@-o-keyframes animSky {
   0% { background-position: 0px 100%; }
   100% { background-position: -275px 100%; }
}
@keyframes animSky {
   0% { background-position: 0px 100%; }
   100% { background-position: -275px 100%; }
}

@-webkit-keyframes animBird {
   from { background-position: 0px 0px; }
   to { background-position: 0px -96px; }
}
@-moz-keyframes animBird {
   from { background-position: 0px 0px; }
   to { background-position: 0px -96px; }
}
@-o-keyframes animBird {
   from { background-position: 0px 0px; }
   to { background-position: 0px -96px; }
}
@keyframes animBird {
   from { background-position: 0px 0px; }
   to { background-position: 0px -96px; }
}

@-webkit-keyframes animPipe {
   0% { left: 900px; }
   100% { left: -100px; }
}
@-moz-keyframes animPipe {
   0% { left: 900px; }
   100% { left: -100px; }
}
@-o-keyframes animPipe {
   0% { left: 900px; }
   100% { left: -100px; }
}
@keyframes animPipe {
   0% { left: 900px; }
   100% { left: -100px; }
}

@-webkit-keyframes animCeiling {
   0% { background-position: 0px 0px; }
   100% { background-position: -63px 0px; }
}
@-moz-keyframes animCeiling {
   0% { background-position: 0px 0px; }
   100% { background-position: -63px 0px; }
}
@-o-keyframes animCeiling {
   0% { background-position: 0px 0px; }
   100% { background-position: -63px 0px; }
}
@keyframes animCeiling {
   0% { background-position: 0px 0px; }
   100% { background-position: -63px 0px; }
}


*,
*:before,
*:after
{
   /* border box */
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   /* gpu acceleration */
   -webkit-transition: translate3d(0,0,0);
   /* select disable */
   -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%;
   overflow: hidden;
   font-family: monospace;
   font-size: 12px;
   color: #fff;
   background-color: 	#2c2c2c;
}

#gamecontainer
{
   position: relative;
   width: 100%;
   height: 100%;
   min-height: 525px;
}

/*
Screen - Game
*/
#gamescreen
{
   position: absolute;
   width: 100%;
   height: 100%;
}

#sky
{
   position: absolute;
   top: 0;
   width: 100%;
   height: 75%;
   background-image: url('../assets/sky.png');
   background-repeat: repeat-x;
   background-position: 0px 100%;
   background-color: #97dff9;

   -webkit-animation: animSky 7s linear infinite;
   animation: animSky 7s linear infinite;
}

#flyarea
{
   position: absolute;
   bottom: 0;
   height: 420px;
   width: 100%;
}

#ceiling
{
   position: absolute;
   top: -16px;
   height: 16px;
   width: 100%;
   background-image: url('../assets/ceiling.png');
   background-repeat: repeat-x;

   -webkit-animation: animCeiling 481ms linear infinite;
   animation: animCeiling 481ms linear infinite;
}

#land
{
   position: absolute;
   bottom: 0;
   width: 100%;
   height: 25%;
   background-image: url('../assets/land.png');
   background-repeat: repeat-x;
   background-position: 0px 0px;
   background-color: #c7cd71;

   -webkit-animation: animLand 2516ms linear infinite;
   animation: animLand 2516ms linear infinite;
}

#bigscore
{
   position: absolute;
   top: 50px;
   left: 150px;
   z-index: 100;
  /* Centrado en pantalla */
  left: 50%;
  transform: translate(-50%, -50%) !important;
}

#bigscore img
{
   display: inline-block;
   padding: 1px;
   transform: translate(-50%, -50%) !important;
}

#splash
{
   position: absolute;
   opacity: 0;
   top: 75px;
   left: 65px;
   width: 188px;
   height: 170px;
   background-image: url('../assets/splash.png');
   background-repeat: no-repeat;

  /* Centrado en pantalla */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#scoreboard
{
   position: absolute;
   display: none;
   opacity: 0;
   width: 236px;
   height: 280px;
   background-image: url('../assets/scoreboard.png');
   background-repeat: no-repeat;

   z-index: 1000;

  /* Centrado en pantalla */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) !important;
}

#medal
{
   position: absolute;
   opacity: 0;
   top: 114px;
   left: 32px;
   width: 44px;
   height: 44px;
}

#currentscore
{
   position: absolute;
   top: 105px;
   left: 107px;
   width: 104px;
   height: 14px;
   text-align: right;
}

#currentscore img
{
   padding-left: 2px;
}

#highscore
{
   position: absolute;
   top: 147px;
   left: 107px;
   width: 104px;
   height: 14px;
   text-align: right;
}

#highscore img
{
   padding-left: 2px;
}

#replay
{
   position: absolute;
   opacity: 0;
   top: 205px;
   left: 61px;
   height: 115px;
   width: 70px;
   cursor: pointer;
}

.boundingbox
{
   position: absolute;
   display: none;
   top: 0;
   left: 0;
   width: 0;
   height: 0;
   border: 1px solid red;
}

#player
{
   left: 60px;
   top: 200px;
}

.bird
{
   position: absolute;
   width: 34px;
   height: 24px;
   background-image: url('../assets/bird.png');

   -webkit-animation: animBird 300ms steps(4) infinite;
   animation: animBird 300ms steps(4) infinite;
}

.pipe
{
   position: absolute;
   left: -100px;
   width: 52px;
   height: 100%;
   z-index: 10;

   -webkit-animation: animPipe 7500ms linear;
   animation: animPipe 7500ms linear;
}

.pipe_upper
{
   position: absolute;
   top: 0;
   width: 52px;
   background-image: url('../assets/pipe.png');
   background-repeat: repeat-y;
   background-position: center;
}

.pipe_upper:after
{
   content: "";
   position: absolute;
   bottom: 0;
   width: 52px;
   height: 26px;
   background-image: url('../assets/pipe-down.png');
}

.pipe_lower
{
   position: absolute;
   bottom: 0;
   width: 52px;
   background-image: url('../assets/pipe.png');
   background-repeat: repeat-y;
   background-position: center;
}

.pipe_lower:after
{
   content: "";
   position: absolute;
   top: 0;
   width: 52px;
   height: 26px;
   background-image: url('../assets/pipe-up.png');
}

#footer
{
   position: absolute;
   bottom: 3px;
   left: 3px;
   position: absolute;
   bottom: -50px;
   width: 100%;
   height: 25%;
}

#footer a,
#footer a:link,
#footer a:visited,
#footer a:hover,
#footer a:active
{
   display: block;
   padding: 2px;
   text-decoration: none;
   color: #fff;
}

/* Contenedor de estrellas */
/* Estrellas generadas con box-shadow */
.stars {
   position: absolute;
   width: 1px;
   height: 1px;
   background: white;
   border-radius: 50%;
   box-shadow:
     20vw 10vh white,
     40vw 80vh white,
     60vw 20vh white,
     80vw 40vh white,
     10vw 90vh white,
     70vw 70vh white,
     30vw 30vh white,
     90vw 60vh white,
     50vw 50vh white,
     25vw 75vh white,
     75vw 25vh white,
     15vw 15vh white,
     85vw 85vh white,
     35vw 65vh white,
     65vw 35vh white;
 
   animation: twinkle 5s ease-in-out infinite;
   opacity: 0.4;
 }
 
 /* Parpadeo sutil */
 @keyframes twinkle {
   0%, 100% { opacity: 0.3; }
   50%      { opacity: 0.5; }
 }

 #sponsor-wrapper {
   position: fixed;
   bottom: 15px;
   width: 100%;
   color: rgb(59, 58, 58);
   font-family: Arial, sans-serif;
   z-index: 999;
 }
 
 #sponsor-title {
   text-align: left;
   padding: 5px;
   font-size: 14px;
   font-weight: bold;
   color: #fff;
   position: absolute;
   text-align: center;
   width: 100%;
   top: -15px;
   font-weight: bold;
 }
 
 #sponsor-banner {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 8px 16px;
 }
 
 #sponsor-logos img {
   margin-right: 10px;
   height: 30px;
 }
 
 #sponsor-donate a {
   background: #ffcc00;
   padding: 6px 12px;
   color: black;
   text-decoration: none;
   font-weight: bold;
   border-radius: 2px;
   transition: background 0.2s;
   width: 86px;
   float: right;
   height: 25px;
   text-align: left;
   /*position: absolute;
   right: 35px;
   top: -25px;*/
 }
 
 #sponsor-donate a:hover {
   background: #ffdb4d;
 }

 .info_divs{
   width: 98%;
   z-index: 1000;
   
 }
 #sponsor-donate{
   width: 50%;
   float: left;
   text-align: right;
 }
 #share-x{
   width: 50%;
   float: left;
 }
 #donate-button {
   position: fixed;
   bottom: 90px;
   right: 15px;
   background: #ffde59;
   padding: 10px 16px;
   border-radius: 12px;
   font-family: 'Arial', sans-serif;
   font-weight: bold;
   color: #222;
   cursor: pointer;
   z-index: 999;
   box-shadow: 0 4px 6px rgba(0,0,0,0.2);
 }
 
 #donate-popup {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0,0,0,0.6);
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 1001;
 }
 
 .popup-content {
   background: white;
   padding: 30px;
   border-radius: 10px;
   width: 300px;
   text-align: center;
 }
 
 .amounts {
   display: flex;
   flex-direction: column;
   gap: 10px;
   margin-bottom: 15px;
 }
 
 .amounts button, .amounts input {
   padding: 10px;
   font-size: 16px;
   color: #fcb34c;
 }

 .amounts button, .amounts input {
   background-color: #562a79;
 }
 
 .cinema-container {
   max-width: 960px;         /* Ancho tipo "cinema", puedes usar 960px o 1440px según el gusto */
   aspect-ratio: 21 / 9;       /* Para mantener la relación tipo cine */
   margin: 0 auto;             /* Centrado horizontal */
   background: #000;           /* Fondo negro para dar sensación de pantalla */
   box-shadow: 0 0 24px rgba(0, 0, 0, 0.5);
   overflow: hidden;
 }

 .cinema-container-footer {
   max-width: 960px;         /* Ancho tipo "cinema", puedes usar 960px o 1440px según el gusto */
   margin: 0 auto;             /* Centrado horizontal */
  
 }

 #top-ad-banner {
   top: 0;
   left: 0;
   width: 100%;
   background: #fff;
   text-align: center;
   z-index: 9999;
   width:100%; 
   height:60px !important; 
   position:fixed; 
   top:0; left:0; 
   z-index:9999; 
   background:#fff;
 }

 .ins_google_ads {
   display: inline-block;
   width: 320px;
   height: 60px  !important;
 }

 /* Tablets */
 @media (min-width: 500px) {
   .ins_google_ads {
     width: 468px;
     height: 60px  !important;
   }
 }

 /* Escritorio */
 @media (min-width: 800px) {
   .ins_google_ads {
     width: 728px;
     height: 60px  !important;
   }
 }

 #share-scores{
   position: absolute;
   /* opacity: 0; */
   top: 350px;
   left: 52px;
   height: 29px;
   width: 135px;
   cursor: pointer;
   border: 2px solid #8cff9c;
   border-radius: 6px;
 }
 .share-buttons-dinamics2 {
   font-size: 20px;
   width: 100%;
   text-align: center;
 }
 .share-buttons-dinamics2 a{
   border-radius: 6px;
   margin-top: 5px;
 }
 #donate-share {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0,0,0,0.6);
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 1001;
 }
 #donate-share-my-score {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0,0,0,0.6);
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 1001;
 }

 @keyframes shake {
   0% { transform: translate(2px, 2px); }
   25% { transform: translate(-2px, -2px); }
   50% { transform: translate(2px, -2px); }
   75% { transform: translate(-2px, 2px); }
   100% { transform: translate(0, 0); }
 }
 .shake {
   animation: shake 0.5s;
 }