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

body{
    min-height:100vh;
    background: linear-gradient(135deg,#FFD6E0 0%,#FFF2CC 50%,#FFE5EC 100%);
    font-family: "Segoe UI",sans-serif;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    color:#6B2737;
    text-align:center;
    overflow:hidden;
    padding:1rem;
    position:relative;
}

h1{ 
   font-size:2.2rem; 
   margin-bottom:0.6rem; 
   z-index:2; 
}

#message{ 
   font-size:1.15rem; 
   max-width:600px; 
   opacity:0; 
   transition:opacity .9s; 
   z-index:2; 
}

.falling-img{
    position:absolute;
    top:-120px;
    animation: fall linear forwards;
    transition: transform .3s, filter .3s;
    z-index:1;
    cursor:pointer;
    user-select:none;
}
.falling-img:hover{
    transform: scale(1.4) rotate(15deg);
    filter: brightness(1.15);
    animation-play-state: paused;
    z-index:3;
}
@keyframes fall{
    0%{ transform: translateY(0) rotate(0deg); opacity:1; }
    100%{ transform: translateY(150vh) rotate(360deg); opacity:.75; }
}

#soundToggle {
    position: fixed;
    bottom: 15px;
    right: 20px;
    font-size: 1.8rem;
    cursor: pointer;
    z-index: 30;
    padding: 8px 12px;
    transition: transform .3s, background .3s;
    user-select: none;
}
#soundToggle:hover {
    transform: scale(1.1);
}
#popup {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 50;
}

.popup-content {
  background: white;
  padding: 1.2rem 1.5rem;
  border-radius: 1rem;
  box-shadow: 0 0 20px rgba(0,0,0,0.3);
  max-width: 80%;
  text-align: center;
  animation: popin 0.3s ease;
  position: relative;
}

#close-popup {
  position: absolute;
  top: 8px;
  right: 12px;
  cursor: pointer;
  font-size: 1.4rem;
  color: #888;
}

#popup-inner img {
  max-width: 250px;
  border-radius: 12px;
}

@keyframes popin {
  from { transform: scale(0.7); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}


@media (max-width:480px){
    h1{ 
        font-size:1rem; 
    }
    #message{ 
        font-size:0.85rem; 
    }

    #soundToggle { 
        font-size: 1.5rem; 
        padding: 6px 10px; 
        bottom: 10px; 
        right: 12px; 
    }
}
.falling-img {
  position: fixed;
  top: -150px;
  animation-name: fallSmooth;
  animation-timing-function: ease-in-out;
  z-index: 10;
  pointer-events: auto;
  opacity: 0.9;
}

@keyframes fallSmooth {
  0% {
    transform: translateY(0);
    opacity: 0.8;
  }
  100% {
    transform: translateY(110vh);
    opacity: 1;
  }
}