@charset "utf-8";
/* CSS Document */
 }
  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }

     :root{

      --primary: #008f39;

      --text-on-primary: #ffffff;

      --black: #ffffff;

      --overlay: rgba(0,0,0,0.45);

      --dark-gray: #222222;

      --max-width: 1920px;

      --header-h: 72px;

    }



    *{box-sizing:border-box;margin:0;padding:0}

    html,body{height:100%}

    body{

      font-family:'Bebas Neue', sans-serif;

      color:var(--black);

      background:#000000;

      -webkit-font-smoothing:antialiased;

      -moz-osx-font-smoothing:grayscale;

    }



    header{

      position:fixed;left:0;right:0;top:0;height:var(--header-h);background:var(--primary);color:var(--text-on-primary);z-index:1100;

      box-shadow:0 2px 8px rgba(0,0,0,0.08);

      transition: transform 0.3s ease;

    }

    .header-inner{max-width:var(--max-width);margin:0 auto;height:100%;display:flex;align-items:center;gap:12px;padding:0 16px;justify-content:space-between}



    .left-controls{display:flex;align-items:center;gap:12px}

    .menu-toggle{background:transparent;border:0;color:var(--text-on-primary);font-size:26px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}

    .logo img{

        position: absolute;

        height:50px;

        width:auto;

        display:block;

        margin-left: auto;

        margin-right: auto;

        left: 0;

        right: 0;

        top:15%;

        text-align: center;

    }

        



    nav.desktop{display:flex;align-items:center;gap:18px}

    nav.desktop ul{list-style:none;display:flex;gap:.5px;align-items:right}

    nav.desktop a{color:var(--text-on-primary);text-decoration:none;padding:8px 10px;border-radius:8px;font-weight:600}

    nav.desktop a:hover{background:rgba(255,255,255,0.08)}

    .social-links{display:flex;gap:10px;align-items:center}

    .social-links a{color:var(--text-on-primary);font-size:18px}



    .mobile-nav{

        position:fixed;

        left:0;

        right:0;

        top:var(--header-h);

        background:var(--primary);

        color:var(--text-on-primary);

        z-index:1099;

        transform:translateY(-120%);

        transition:transform .28s ease;

        padding:18px;

    }

    .mobile-nav.open{transform:translateY(0)}

    .mobile-nav ul{list-style:none;display:flex;flex-direction:column;gap:1px}

    .mobile-nav a{color:var(--text-on-primary);text-decoration:none;padding:12px;border-radius:8px;display:block}



    main{max-width:var(--max-width);margin:calc(var(--header-h) + 20px) auto 40px;padding:0 16px;min-height:calc(100vh - var(--header-h) - 120px)}



   



    footer{background:var(--dark-gray);color:#fff;font-family:'Bebas Neue',sans-serif;padding:22px;text-align:center;margin-top:28px}







    /* Responsive behavior */

    @media (max-width:900px){

      nav.desktop{display:none}

      .menu-toggle{display:inline-flex}

    }

    @media (min-width:901px){

      .mobile-nav{display:none}

      .menu-toggle{display:none}

    }



    /* ESTILOS DE ALTA CALIDAD */
    #game-wrapper {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        background: #1a1a1a;
        color: white;
        max-width: 500px;
        margin: 0 auto;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 20px 50px rgba(0,0,0,0.5);
        border: 4px solid #333;
        user-select: none; /* Evita seleccionar texto al jugar */
    }

    .header-game {
        background: #000;
        padding: 15px;
        text-align: center;
        border-bottom: 2px solid #333;
    }

    .score-board {
        font-weight: bold;
        color: white;
        margin-top: 5px;
        font-size: 18px;
    }

    .game-area {
        height: 400px;
        position: relative;
        background: radial-gradient(circle at center, #2c3e50 0%, #000000 100%);
        display: flex;
        justify-content: center;
        align-items: flex-end;
        padding-bottom: 50px;
    }

    /* El Grifo */
    .tap {
        position: absolute;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
        width: 60px;
        height: 40px;
        background: #95a5a6;
        border-radius: 5px;
        z-index: 5;
    }
    .tap-spout {
        width: 20px;
        height: 20px;
        background: #7f8c8d;
        margin: 20px auto 0;
    }
    
    /* El Chorro de Cerveza */
    .flow {
        width: 15px;
        height: 0; /* Crece al servir */
        background: #f1c40f; /* Color Cerveza */
        margin: 0 auto;
        transition: height 0.1s;
        box-shadow: 0 0 10px #f39c12;
    }
    .pouring .flow {
        height: 400px; /* Llega hasta abajo */
    }

    /* El Vaso */
    .glass-container {
        width: 100px;
        height: 200px;
        border: 4px solid rgba(255,255,255,0.3);
        border-top: none;
        border-radius: 0 0 15px 15px;
        position: relative;
        background: rgba(255,255,255,0.05);
        overflow: hidden;
        z-index: 2;
    }

    /* Zona Objetivo (Verde) */
    .target-zone {
        position: absolute;
        bottom: 70%; /* Cambia aleatoriamente */
        left: 0;
        width: 100%;
        height: 30px; /* Margen de error */
        background: rgba(46, 204, 113, 0.3);
        border-top: 2px dashed #2ecc71;
        border-bottom: 2px dashed #2ecc71;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .target-text {
        font-size: 10px;
        color: #2ecc71;
        font-weight: bold;
        text-shadow: 1px 1px 0 #000;
    }

    /* El Líquido */
    .beer-liquid {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 0%; /* 0 a 100% */
        background-color: #f39c12;
        transition: height 0.1s linear; /* Controla la suavidad del llenado */
    }
    
    .foam {
        width: 100%;
        height: 10px;
        background: white;
        position: absolute;
        top: 0;
    }

    /* Mensajes Overlay */
    .msg-overlay {
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0,0,0,0.85);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 10;
        text-align: center;
        padding: 20px;
    }
    
    /* Botones */
    .game-btn {
        background: #27ae60;
        border: none;
        color: white;
        padding: 15px 30px;
        font-size: 18px;
        border-radius: 5px;
        cursor: pointer;
        font-weight: bold;
        margin-top: 15px;
    }
    
    .pour-btn {
        width: 100%;
        padding: 25px;
        font-size: 20px;
        font-weight: bold;
        border: none;
        background: #ffaa00;
        color: #000;
        cursor: pointer;
        text-transform: uppercase;
    }
    .pour-btn:active {
        background: #e67e22;
    }
    /* Animación burbujas */
    .bubbles span {
        position: absolute; bottom: -10px; background: rgba(255,255,255,0.5); border-radius: 50%;
        animation: bubble 2s infinite;
    }
    .bubbles span:nth-child(1) { left: 20%; width: 5px; height: 5px; animation-duration: 2s; }
    .bubbles span:nth-child(2) { left: 50%; width: 7px; height: 7px; animation-duration: 3s; }
    .bubbles span:nth-child(3) { left: 80%; width: 4px; height: 4px; animation-duration: 1.5s; }
    
    @keyframes bubble { 0% { bottom: 0; opacity: 0; } 50% { opacity: 1; } 100% { bottom: 100%; opacity: 0; } }

    /* Efectos de Resultado */
    .win-glow { box-shadow: 0 0 30px #2ecc71; border-color: #2ecc71; }
    .lose-glow { box-shadow: 0 0 30px #e74c3c; border-color: #e74c3c; }