@charset "UTF-8";

            * {
                margin: 0;
                padding: 0;
                border: 0;
            }

            html, body{
               height: 100%; margin: 0;
            }


@font-face {
  font-family: "subway-footlong";
  src: url("images/subway-footlong.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}



div{
    pointer-events: none;
}

            #loader-container {
                
                width: 700px;
                height: 1280px;
                box-sizing: border-box;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                position: absolute;
                background: #00451e;
                z-index: 10000;
                border: 1px solid #555555;
            }

            body {
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
                -webkit-text-size-adjust: 100%;
                -o-text-size-adjust: 100%;
                -ms-text-size-adjust: 100%;
                text-size-adjust: 100%;
                background: #FFF;
                font-family: "MiFuente", sans-serif;
            }

            #banner_content {
                display: none;
            }

            .banner {
                font-family: Arial, Helvetica, sans-serif;
                
                width: 700px;
                height: 1280px;
                box-sizing: border-box;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                border: 1px solid #555555;
                overflow: hidden;
                display: block !important;
                background: #00451e;
                transform: translate3d(0px, 0px, 0px);
            }

            strong {
                font-weight: bold;
            }

            sup {
                font-size: 6px;
                position: relative;
                top: -0.8em;
                left: -2px;
            }

            .positionAb {
                position: absolute;
            }

            .fullSize {
                
                width: 700px;
                height: 1280px;
            }

            .aC {
                left: 0;
                right: 0;
                margin: 0 auto;
            }

            #clickTag {
                
                width: 700px;
                height: 1280px;
                cursor: pointer;
                box-sizing: border-box;
                top: -1px;
                left: -1px;
                pointer-events: auto;
            }

            #loader-container .circle {
                -webkit-animation: spin 0.5s linear infinite;
                animation: spin 0.5s linear infinite;
                border: 5px solid #ddd;
                border-bottom-color: #333;
                border-radius: 50%;
                height: 40px;
                left: 50%;
                margin-left: -22.5px;
                margin-top: -22.5px;
                position: absolute;
                top: 50%;
                -webkit-transition: all 0.7s ease-in-out;
                -o-transition: all 0.7s ease-in-out;
                transition: all 0.7s ease-in-out;
                width: 40px;
            }

            @-webkit-keyframes spin {
                from {
                    -webkit-transform: rotate(0deg);
                    transform: rotate(0deg);
                }
                to {
                    -webkit-transform: rotate(360deg);
                    transform: rotate(360deg);
                }
            }

            @keyframes spin {
                from {
                    -webkit-transform: rotate(0deg);
                    transform: rotate(0deg);
                }
                to {
                    -webkit-transform: rotate(360deg);
                    transform: rotate(360deg);
                }
            }


            .wrapAd{
            width: 700px;
            height: 1280px;
            left: 0px;
            top: 0px;

            }

            img{
                width: 100%;
                height: auto;
                background-size:contain;
            }




.pec{
  position: relative;
  width: 100%;
  height: 100%;       
  overflow: hidden;
  background: #000;  

}

#scale-wrap{
  position: absolute;
  top: 0; left: 0;
  transform-origin: 0 0;  
  will-change: transform;
}



#wrapAd{
  width: 700px;
  height: 1280px;
  left: 0px;
  top: 0px;

}


.fr1{
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
}

.bg{
  width: 700px;
  height: 1280px;
  left: 0px;
  top: 0px;
}

#logo{
  width: 302px;
  height: auto;
  left: 198px;
  top: 58px;
}

#title{
  width: 676px;
  height: auto;
  left: 14px;
  top: 108px;
}

#product{
  width: 926px;
  height: auto;
  left: -78px;
  top: 344px;
}

#buttonPlay{
  width: 488px;
  height: auto;
  left: 104px;
  top: 958px;
  pointer-events: auto;
}

.fr2{
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
}


#wrapInstructios{
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;

}

#instruction1Inner{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 4rem;
    width: 431px;
}

#instruction1{
        width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 4rem;
}

#startGame{
    width: 221px;
    height: auto;
        display: flex;
    justify-content: center;
    align-items: center;
      pointer-events: auto;

}

.overlay{
    background-color: #000;
    opacity: 0.8;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
}

.overlay1{
    width: 100%;
    height: 100%;
    display: flex;
}



.fr3{
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}




.fr4{
    width: 101%;
    height: 100%;
    left: 0px;
    top: 0px;
    border: 2px solid #000;
}

#bgEnd{
    width: 100%;
    height: 1280px;
    left: 0px;
    top: 0px;
}

#logoEnd{
    width: 259px;
    height: auto;
    left: 220px;
    top: 97px;    
}


[id*="titleEnd"]{
    width: 526px;
    height: auto;
    left: 90px;
    top: 268px;    
}

[id*="textEnd"]{
    width: 457px;
    height: auto;
    left: 126px;
    top: 902px;    
}

#footer{
    width: 361px;
    height: auto;
    left: 167px;
    top: 1185px;    
}


.wrapEnd{
    width: 100%;
    height: 1280px;
    left: 0px;
    top: 0px;
}



.bgGame{
    background-color: #00451e;
    width: 100%;
    height: 100%;
}



/*game*/
 :root{ --bg:#0a4a34; --wall:#e7c23a; --ui:#ffffffcc; }
 *{ box-sizing:border-box }


   .no-transform { transform: none !important; }

.wrap{ display:grid; place-items:center; min-height:100%; padding-top: 90px;}
  #game{
    position:relative; width:min(100vh, 720px); aspect-ratio:9/11; 
    border-radius:18px;
    overflow:hidden; user-select:none; touch-action:none;
      pointer-events: auto;

  }
  
  .hud{ 
    position: absolute;
    right: 0px;
    top: 20px;
    padding-left: 30px;
    padding-right: 30px;
    display: flex;
    gap: 8px;
    justify-content: space-between;
    color: var(--ui);
    font-size: 22px;
    font-weight: 600;
    text-shadow: 0 1px 1px #000;
    z-index: 0;
    width: 100%;
  }

  #leftCount{font-size: 30px; color: #f2f74b;}
  #countdown{font-size: 30px; color: #f2f74b;}
  .kbd{ font:11px/1.1 ui-monospace,Menlo,Consolas; background:#fff2; border:1px solid #fff4; border-bottom-width:2px; padding:2px 6px; border-radius:6px }
  #goal{ position:absolute; width:18px; height:18px; transform:translate(-50%,-50%); z-index:3; background:#6ce279; border-radius:50%; box-shadow:0 0 0 4px #245e2f inset, 0 0 12px #72ff91 }
  svg{ width:100%; height:100%; display:block; pointer-events:none; filter: drop-shadow(0 3mm 2mm rgb(0 41 18));}

  /* Contenedor que se mueve por el path (incluye imagen + margen frontal) */
  #dog{
    position:absolute; left:0; top:0;
    transform:translate(-50%,-50%) rotate(0deg); /* x/y y rotación vía GSAP */
    width:0; height:0; /* se setea por JS */
     will-change: transform, width, height;
  }

  /* Imagen real del hotdog dentro del contenedor */
  #dogInner{
    position:absolute; left:50%; top:50%;
    transform: translate(-50%, -50%); /* el corrimiento por “gap” se agrega por JS */
    width:0; height:0;               /* se setea por JS */
    background-image:url('https://raw.githubusercontent.com/psine1/demo-ads/refs/heads/main/hotdogv5.png');
    background-size:100% 100%; background-repeat:no-repeat; background-position:center;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,.28));
    will-change: transform, width, height;
  }


#stage{
  position:absolute;       /* <— antes era un bloque normal */
  inset:0;
  width:100%;
  height:100%;
  display:block;
  pointer-events:none;
  z-index:1;               /* pared de fondo */
}


#goal{ z-index:9; }        /* la meta encima del SVG pero debajo de ingredientes */
#dog{ z-index:5; }         /* el hotdog arriba de todo */
#win{ z-index:6; }         /* overlay de victoria al tope */

/* Capa para los coleccionables por encima del SVG */
#ingredientsLayer{
  position:absolute;
  inset:0;
  z-index:3;               /* por encima del SVG y de la meta */
  pointer-events:none;     /* no intercepta drags/teclas */
}

  /* Collectibles */
  .ingredient{
    position:absolute; transform:translate(-50%,-50%);
    background-size:contain; background-repeat:no-repeat; background-position:center;
    width:0; height:0; /* se setea por JS */
    z-index:999; pointer-events:none; /* por debajo del perro, encima del fondo */
    filter: drop-shadow(0 1px 1px rgba(0,0,0,.35));
    z-index: 999;
  }

  /* Win overlay */


#instruction2{
    left: 96px;
    top: 117px;
    width: 506px;
    height: auto;
}

#instruction3{
    left: 96px;
    top: 117px;
    width: 506px;
    height: auto;
}

#ingredientsLeftText{
    font-size: 5pt;
}


#logoGame{
    width: 175px;
    height: auto;
    right: 40px;
    top: 1150px;
}

/* End Game */