/* 1. Reset & Full-screen */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
  }
  html,body{
    width:100%;
    height:100%;
    overflow:hidden;
    font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
    background:linear-gradient(135deg,#43cea2 0%,#185a9d 100%);
    background-size:400% 400%;
    animation:bgMove 15s ease infinite;
  }
  @keyframes bgMove{
    0%{background-position:0% 50%;}
    50%{background-position:100% 50%;}
    100%{background-position:0% 50%;}
  }
  
  /* 2. Canvas */
  canvas{
    display:block;
    width:100%;
    height:100%;
    cursor:pointer;
  }
  
  /* 3. Pop-up Overlay */
  #popup-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.55);
    display:none;
    justify-content:center;
    align-items:center;
    z-index:9999;
    transition:opacity .3s;
  }
  #popup-overlay.show{
    display:flex;
  }
  .popup-box{
    background:#fff;
    color:#333;
    padding:40px 60px;
    border-radius:20px;
    text-align:center;
    box-shadow:0 10px 30px rgba(0,0,0,.3);
    transform:scale(.7);
    transition:transform .3s;
  }
  #popup-overlay.show .popup-box{
    transform:scale(1);
  }
  .popup-box h2{
    font-size:2rem;
    margin-bottom:10px;
  }
  .popup-box p{
    font-size:1.2rem;
    margin-bottom:25px;
  }
  .popup-box button{
    font-size:1rem;
    padding:12px 30px;
    border:none;
    border-radius:50px;
    background:#43cea2;
    color:#fff;
    cursor:pointer;
    transition:background .25s;
  }
  .popup-box button:hover{
    background:#2fa085;
  }