﻿body{margin:0;padding:0;background:#ffe;font-size:12px;overflow:auto}
#mainDiv{width:100%;height:100%}
#content{ position: relative; }		 /* ВАЖНО: теперь overlay привяжется к контенту */
#loveHeart{float:left;width:670px;height:625px;position:relative}
#garden{width:100%;height:100%;position:relative;z-index:1}
#overlay{
    position:absolute; 
    left:0; top:0; 
    width:100%; height:100%;
    pointer-events:none;
    z-index:999;                          /* выше #code (z-index:2) */
  }
#words{font-family:"sans-serif";width:500px;font-size:24px;color:#666}
#messages{display:none;text-align: center;font-size: 30px}
#latinPhrase{font-style: normal;font-family:"MonteCarlo", cursive;color:#444;margin-top:10px;font-size: 35px;}
#elapseClock .digit{font-family:"digit";font-size:40px;text-align: center;}
#bday{padding:5px;font-size:22px;margin-top:80px;margin-right:120px;text-align:right;display:none}
#bday .signature{margin-top:10px;font-size:20px;font-style:italic}
#clickSound{display:none}
#code{float:left;width:440px;height:400px;color:#333;font-family:"Consolas","Monaco","Bitstream Vera Sans Mono","Courier New","sans-serif";font-size:14px;position:relative;z-index:2}
#code .string{color:#2a36ff}
#code .keyword{color:#7f0055;font-weight:bold}
#code .placeholder{margin-left:15px}#code .space{margin-left:7px}
#code .comments{color:#3f7f5f}
#copyright{margin-top:10px;text-align:center;width:100%;color:#666}
#errorMsg{width:100%;text-align:center;font-size:24px;position:absolute;top:100px;left:0}
#copyright a{color:#666}
#icon{font-size: 48px;color: red;margin: 50 px; align-content: center;}
#heartspan{align-content: center;text-align: center;margin: 20px;}

/* GIF modal */
#gifModal{position:fixed;inset:0;background:rgba(0,0,0,0.35);display:none;align-items:center;justify-content:center;z-index:999}
#gifModal.show{display:flex;animation:fadeIn .25s ease}
.gif-container{position:relative;background:transparent;transform:scale(.9);animation:popIn .25s ease forwards;width:50vw;height:60vh;display:flex;align-items:center;justify-content:center}
.gif-container img{width:100%;height:100%;object-fit:contain;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,0.3)}
#gifClose{position:absolute;top:-10px;right:-10px;width:32px;height:32px;border:none;border-radius:50%;background:#fff;color:#333;font-size:20px;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,0.2)}
#gifClose:hover{background:#f2f2f2}

@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes popIn{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}