@-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: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  pointer-events: none;
}


#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: 380px;
   /*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;
   height: 14px;
   text-align: right;
}

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

#highscore
{
   position: absolute;
   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;
 }

 .login-popup {
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, 0.6);
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 9999;
 }
 
 .login-popup-content {
   background: #fff;
   border-radius: 12px;
   padding: 24px 20px;
   width: 90%;
   max-width: 360px;
   text-align: center;
   font-family: Arial, sans-serif;
 }
 
 .login-popup-content h2 {
   margin: 0 0 10px;
   color: #222;
 }
 
 .login-popup-content p {
   color: #555;
   font-size: 15px;
 }
 
 .login-popup-actions {
   display: flex;
   justify-content: space-between;
   margin-top: 20px;
   gap: 10px;
 }
 
 .login-popup-actions button {
   flex: 1;
   padding: 10px;
   border-radius: 8px;
   border: none;
   font-size: 14px;
   cursor: pointer;
 }
 
 #login-accept {
   background: #4285f4;
   color: white;
 }
 
 #login-cancel {
   background: #e0e0e0;
   color: #333;
 }
/* Normal */
.pipe.normal .pipe_upper,
.pipe.normal .pipe_lower {
  background-color: #6abf4b;
}

/* Moving */
.pipe.moving .pipe_upper,
.pipe.moving .pipe_lower {
  background-color: #3fa9f5;
}

/* Narrow */
.pipe.narrow .pipe_upper,
.pipe.narrow .pipe_lower {
  background-color: #e74c3c;
}
#speed-indicator {
   position: absolute;
   top: 10px;
   right: 10px;
   font-family: monospace;
   font-size: 14px;
   color: #fff;
   opacity: 0.8;
   z-index: 1000;
}
#user-avatar {
   position: absolute;
   top: 5px;
   right: 10px;
   width: 52px;
   height: 52px;
   border-radius: 50%;
   overflow: hidden;
   border: 2px solid rgba(255,255,255,0.8);
   cursor: pointer;
   z-index: 999;
   background: #000;
   z-index: 10000;
}

#user-avatar img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

#user-avatar.logged-out img {
   filter: grayscale(100%);
   opacity: 0.6;
}
/* ===================== PROFILE POPUP ===================== */
.profile-popup {
   max-width: 360px;
 }
 
 .profile-popup label {
   display: block;
   margin: 8px 0 4px;
 }
 
 .profile-popup input {
   width: 100%;
   padding: 8px;
   box-sizing: border-box;
 }
 
 .profile-stats {
   font-size: 14px;
   margin: 10px 0;
 }
 
 .profile-actions {
   display: flex;
   justify-content: space-between;
   margin-top: 10px;
 }
 .popup {
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
   background: rgba(0,0,0,0.6);
   display: none;
   align-items: center;
   justify-content: center;
   z-index: 9999;
 }
 
 .popup-content {
   background: #fff;
   padding: 20px;
   border-radius: 12px;
   max-width: 360px;
   width: 90%;
 } 
 /* ===== BOTONES BASE ===== */
.btn {
   padding: 10px 16px;
   font-size: 15px;
   border-radius: 8px;
   border: none;
   cursor: pointer;
   font-weight: 600;
   transition: all 0.2s ease;
 }
 
 .btn:active {
   transform: scale(0.97);
 }
 
 /* ===== BOTÓN PRIMARIO ===== */
 .btn-primary {
   background: #4285f4;
   color: #fff;
 }
 
 .btn-primary:hover {
   background: #357ae8;
 }
 
 /* ===== BOTÓN SECUNDARIO ===== */
 .btn-secondary {
   background: #e0e0e0;
   color: #333;
 }
 
 .btn-secondary:hover {
   background: #d5d5d5;
 }
 
 /* ===== PROFILE ACTIONS ===== */
 .profile-actions {
   display: flex;
   gap: 10px;
   margin-top: 14px;
 }
 
 .profile-actions .btn {
   flex: 1;
 }

 .profile-popup h2 {
   font-size: 22px;
   font-weight: 700;
   color: #222;
   text-align: center;
   margin-bottom: 14px;
   line-height: 1.2;
 }
 .profile-popup h2 span{
   font-size: 28px;
 }
 .profile-popup label {
   display: block;
   font-size: 13px;
   font-weight: 600;
   color: #555;
   margin: 10px 0 4px;
 }
 .profile-popup .optional {
   font-weight: 400;
   font-size: 12px;
   color: #888;
   margin-left: 4px;
 }
 
 #user-avatar.checking {
   opacity: 0.6;
   pointer-events: none;
 }
 
 #user-avatar.checking::after {
   content: "";
   position: absolute;
   inset: 0;
   border-radius: 50%;
   border: 2px solid #4285f4;
   border-top-color: transparent;
   animation: spin 0.8s linear infinite;
 }
 
 @keyframes spin {
   to { transform: rotate(360deg); }
 }
 
 #user-avatar.error {
   border-color: #e53935;
 }
 .game-loading {
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
   background: rgba(0,0,0,0.65);
   z-index: 99999; /* MÁS ALTO QUE TODO */
   display: none;
   align-items: center;
   justify-content: center;
 }
 
 .game-loading-content {
   color: #fff;
   text-align: center;
   font-size: 16px;
 }
 
 .game-loading .spinner {
   width: 36px;
   height: 36px;
   border: 3px solid rgba(255,255,255,0.3);
   border-top-color: #fff;
   border-radius: 50%;
   margin: 0 auto 10px;
   animation: spin 0.8s linear infinite;
 }
 
 @keyframes spin {
   to { transform: rotate(360deg); }
 }
 #top-stats-bar {
   background: linear-gradient(180deg, #0b0f1e, #060913);
   padding: 10px 0;
   border-bottom: 1px solid rgba(255,255,255,0.08);
 }
 
 .player-main-stats {
   display: flex;
   justify-content: center;
   gap: 60px;
 }
 
 .main-stat {
   text-align: center;
 }
 
 .main-stat .label {
   font-size: 13px;
   letter-spacing: 1px;
   color: #9aa0c3;
 }
 
 .main-stat span:last-child {
   display: block;
   font-size: 28px;      /* 👈 más grande */
   font-weight: 800;
   margin-top: 2px;
 }
 
 .main-stat.best span:last-child {
   color: #ffd54f;
   text-shadow: 0 0 10px rgba(255,213,79,0.5);
 }
 
 .main-stat.total span:last-child {
   color: #7fd7ff;
 }

 #top-hud {
   position: absolute;
   top: 14px;
   right: 14px;
 
   display: flex;
   gap: 10px;
 
   z-index: 3; /* debajo del bird, sobre el fondo */
   pointer-events: none; /* 🔥 NO INTERACTÚA */
 }
 
 .hud-block {
   background: rgba(10, 15, 31, 0.55);
   backdrop-filter: blur(6px);
   border-radius: 8px;
   padding: 8px 10px;
   min-width: 130px;
 
   box-shadow: 0 0 12px rgba(0,0,0,0.4);
 }
 
 .hud-title {
   font-size: 11px;
   color: #ffd54f;
   text-align: center;
   margin-bottom: 6px;
   letter-spacing: 0.5px;
 }
 
 .hud-block ul {
   list-style: none;
   margin: 0;
   padding: 0;
 }
 
 .hud-block li {
   display: flex;
   justify-content: space-between;
   font-size: 11px;
   color: #e6e9ff;
   line-height: 1.4;
 }
 
 .hud-block li span {
   color: #7fd7ff;
 }
 #top-hud {
   animation: hudFadeIn 1s ease;
 }
 
 @keyframes hudFadeIn {
   from { opacity: 0; transform: translateY(-6px); }
   to   { opacity: 1; transform: none; }
 }
 #top-hud {
   position: absolute;
   top: 14px;
   left: 14px;        /* 👈 AHORA A LA IZQUIERDA */
   right: auto;
 
   display: flex;
   gap: 10px;
 
   z-index: 3;
   pointer-events: none; /* no interfiere con el juego */
 }
 #scoreboard {
   text-align: center;
   color: #fff;
 }
 
 /* GAME OVER */
 .gameover-title {
   font-size: 26px;
   font-weight: 800;
   letter-spacing: 2px;
   color: #ff5252;
   margin-bottom: 10px;
 }
 
 /* SCORE */
 .gameover-score .label {
   font-size: 11px;
   color: #aaa;
 }
 
 .gameover-score span:last-child {
   display: block;
   font-size: 34px;
   font-weight: 800;
   margin-bottom: 12px;
 }
 
 /* BEST / TOTAL */
 .gameover-stats {
   display: flex;
   justify-content: center;
   gap: 40px;
   margin-bottom: 12px;
 }
 
 .gameover-stats .stat .label {
   font-size: 10px;
   color: #9aa0c3;
 }
 
 .gameover-stats .stat span:last-child {
   font-size: 18px;
   font-weight: 700;
 }
 
 /* VIDAS */
 .lives-container {
   margin-bottom: 12px;
 }
 
 .lives-container .label {
   font-size: 10px;
   color: #aaa;
   display: block;
   margin-bottom: 4px;
 }
 
 .lives {
   display: flex;
   justify-content: center;
   gap: 6px;
 }
 
 .life {
   width: 26px;
   opacity: 0.4;
 }
 
 .life.active {
   opacity: 1;
 }
 
 /* ACCIONES */
 .gameover-actions {
   display: flex;
   justify-content: center;
   gap: 20px;
   margin-top: 12px;
 }
 /* CARD */
.scoreboard-card {
   background: linear-gradient(
     180deg,
     rgba(10, 15, 31, 0.92),
     rgba(5, 8, 20, 0.92)
   );
   border-radius: 16px;
   padding: 18px 20px 20px;
   box-shadow: 0 20px 40px rgba(0,0,0,0.6);
   backdrop-filter: blur(6px);
   text-align: center;
   color: #fff;
   max-width: 320px;
   margin: auto;
 }
 
 /* TITLE */
 .gameover-title {
   font-size: 26px;
   font-weight: 900;
   letter-spacing: 2px;
   color: #ff5a5a;
   margin-bottom: 12px;
 }
 
 /* SCORE */
 .gameover-score {
   margin-bottom: 14px;
 }
 
 .score-label {
   font-size: 11px;
   letter-spacing: 1.5px;
   color: #b8bddb;
 }
 
 .score-value {
   font-size: 40px;
   font-weight: 900;
   margin-top: 2px;
   color: #ffffff;
   text-shadow: 0 4px 12px rgba(0,0,0,0.7);
 }
 
 /* STATS */
 .gameover-stats {
   display: flex;
   justify-content: center;
   gap: 42px;
   margin-bottom: 14px;
 }
 
 .stat-label {
   font-size: 10px;
   letter-spacing: 1px;
   color: #aab0d6;
 }
 
 .stat-value {
   font-size: 19px;
   font-weight: 800;
   margin-top: 2px;
 }
 
 /* COLORS */
 .stat.best .stat-value {
   color: #f6c453;
 }
 
 .stat.total .stat-value {
   color: #4fc3f7;
 }
 
 /* LIVES */
 .lives-container {
   margin-bottom: 14px;
 }
 
 .lives-label {
   font-size: 10px;
   letter-spacing: 1px;
   color: #aab0d6;
   margin-bottom: -2px;
 }
 
 .lives {
   display: flex;
   justify-content: center;
   gap: 10px;
 }
 
 .life {
   width: 22px;
   height: 28px;
   background: radial-gradient(circle at 30% 30%, #fff, #e0e0e0);
   border-radius: 50% 50% 45% 45%;
   opacity: 0.3;
 }
 
 .life.active {
   opacity: 1;
 }
 
 /* ACTIONS */
 .gameover-actions {
   display: flex;
   flex-direction: column;
   gap: 10px;
   margin-top: 10px;
 }
 
 /* PRIMARY BUTTON */
 .btn-primary {
   background: linear-gradient(180deg, #4fc3f7, #1e88e5);
   border: none;
   border-radius: 12px;
   padding: 12px;
   font-size: 14px;
   font-weight: 800;
   color: #fff;
   cursor: pointer;
   letter-spacing: 1px;
   box-shadow: 0 6px 14px rgba(0,0,0,0.5);
   transition: transform 0.15s ease, box-shadow 0.15s ease;
 }
 
 .btn-primary:hover {
   transform: translateY(-1px);
   box-shadow: 0 10px 22px rgba(0,0,0,0.7);
 }
 
 /* SECONDARY */
 .btn-secondary_share {
   background: rgba(255,255,255,0.08);
   border: 1px solid rgba(255,255,255,0.15);
   border-radius: 12px;
   padding: 10px;
   font-size: 12px;
   font-weight: 700;
   color: #fff;
   cursor: pointer;
   letter-spacing: 1px;
   transition: background 0.15s ease;
 }
 
 .btn-secondary_share:hover {
   background: rgba(255,255,255,0.15);
 }
/* SCORE BOX */
.score-box {
   min-height: 42px;
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
 .score-digits img {
   display: block;
 }
 
 /* STATS BOX */
 .stat-box {
   min-height: 26px;
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
 .stat-digits img {
   display: block;
 }
 
 /* evita saltos verticales */
 #currentscore,
 #highscore,
 #totalscore {
   line-height: 1;
 }
 #bigscore {
   font-size: 40px;
   font-weight: 900;
   letter-spacing: 2px;
   font-family: 'Press Start 2P', monospace;
   font-size: 44px;
   letter-spacing: 4px;
 }
 
 #currentscore {
   font-size: 36px;
   font-weight: 900;
 }
 
 #highscore,
 #totalscore {
   font-size: 18px;
   font-weight: 800;
 }
 
 .stat.best #highscore {
   color: #f6c453;
 }
 
 .stat.total #totalscore {
   color: #4fc3f7;
 }
 .lives-container {
   margin-top: 14px;
   text-align: center;
 }
 
 .lives-header {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 6px;
   font-size: 12px;
   font-weight: 800;
   letter-spacing: 1px;
   color: #f6c453;
 }
 
 .lives-cost {
   font-size: 15px;
   font-weight: 900;
 }
 
 .revive-btn {
   margin-top: 8px;
   padding: 10px 26px;
   border-radius: 999px;
   border: none;
   font-size: 14px;
   font-weight: 900;
   letter-spacing: 1px;
   background: linear-gradient(135deg, #ffcc33, #ff9f1a);
   color: #2b1a00;
   cursor: pointer;
   box-shadow: 0 6px 0 #c77b12;
   transition: transform 0.1s ease, box-shadow 0.1s ease, opacity 0.2s;
 }
 
 .revive-btn:hover:not(:disabled) {
   transform: translateY(1px);
   box-shadow: 0 5px 0 #c77b12;
 }
 
 .revive-btn:active:not(:disabled) {
   transform: translateY(3px);
   box-shadow: 0 2px 0 #c77b12;
 }
 
 .revive-btn:disabled {
   opacity: 0.35;
   cursor: not-allowed;
   box-shadow: none;
 }
 
 .lives-hint {
   margin-top: 10px;
   font-size: 10px;
   opacity: 0.6;
 }
 .revive-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  pointer-events: all;
}

.revive-text {
  font-size: 72px;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 4px 20px rgba(0,0,0,.6);
  animation: pop 1s ease-in-out;
}

@keyframes pop {
  0% { transform: scale(0.5); opacity: 0; }
  60% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); }
}
.revive-number {
  font-size: 140px;
  font-weight: 900;
  color: #fff;
  line-height: 1;
  text-shadow:
    0 8px 24px rgba(0,0,0,0.7),
    0 0 40px rgba(255,255,255,0.2);
}

.revive-number.pump {
  animation: revivePump 0.6s ease-out;
}

@keyframes revivePump {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }
  60% {
    transform: scale(1.25);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}

#bigscore-value {
  display: inline-block;
  font-family: 'Press Start 2P', monospace;
  font-size: 44px;
  font-weight: 900;
  letter-spacing: 4px;
  transform-origin: center center;
}

@keyframes score-pump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.4); }
  70%  { transform: scale(0.96); }
  100% { transform: scale(1); }
}

#bigscore-value.pump {
  animation: score-pump 0.32s cubic-bezier(.2,.8,.3,1);
}
@keyframes pipe-blink {
  0%   { opacity: 0.5; }
  20%  { opacity: 0.3; }
  50%  { opacity: 0.05; }
  70%  { opacity: 0.1; }
  90% { opacity: 0.5; }
  100% { opacity: 1; }
}
.pipe.blink {
  animation-name: animPipe, pipe-blink;
  animation-duration: var(--pipe-speed, 2500ms), 1s;
  animation-timing-function: linear, steps(1);
  animation-iteration-count: 1, infinite;
}
@keyframes pipeFade {
  0%   { opacity: 0.12; }
  50%  { opacity: 0.09; }
  100% { opacity: 0.01; }
}
.pipe.fade {
  animation-name: animPipe, pipeFade;
  animation-duration: var(--pipe-speed, 0ms), 1s;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: 1, infinite;
}
#free-egg-container {
  position: absolute;
  top: 75px;          /* debajo del avatar */
  right: 12px;        /* mismo eje visual del avatar */

  display: flex;
  flex-direction: column;
  align-items: center;

  z-index: 9999;
  font-family: 'Press Start 2P', monospace;
}

/* 🥚 BASE */
#free-egg-btn {
  font-size: 30px;
  line-height: 1;
  user-select: none;
  cursor: pointer;

  transition:
    transform 0.15s ease,
    filter 0.25s ease,
    opacity 0.25s ease,
    box-shadow 0.25s ease;
}

/* ❌ OFF / BLOQUEADO */
#free-egg-btn.disabled {
  cursor: not-allowed;

  filter:
    grayscale(100%)
    brightness(0.75)
    contrast(0.85);
  opacity: 0.45;
  transform: scale(0.95);
  animation: none;
}

/* ✅ DISPONIBLE */
#free-egg-btn.ready {
  filter: none;
  opacity: 1;
  animation: eggPulse 2s infinite;
}

#free-egg-timer {
  margin-top: 15px;        /* 👈 antes 4px */
  font-size: 10px;
  color: #111;
  opacity: 0.85;
  text-align: center;
  text-shadow: 0 1px 2px rgba(255,255,255,0.6);
  letter-spacing: 1px;
}

/* ✨ PULSE SUAVE */
@keyframes eggPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.25); }
}
.clock-colon {
  display: inline-block;
  width: 6px;
  text-align: center;
  animation: blinkColon 1s steps(1) infinite;
}

@keyframes blinkColon {
  0%   { opacity: 1; }
  50%  { opacity: 0; }
  100% { opacity: 1; }
}
#free-egg-btn.disabled + #free-egg-timer {
  opacity: 0.75;
  color: #333;
  text-shadow: none;
}
#free-egg-btn.disabled::after {
  content: "⏳";
  position: absolute;
  font-size: 10px;
  bottom: -6px;
  right: -6px;
  opacity: 0.6;
}
#free-egg-btn {
  transition:
    transform 0.15s ease,
    filter 0.15s ease,
    opacity 0.15s ease;
}

#free-egg-btn.disabled {
  transition: none; /* 👈 OFF inmediato */
}