body{margin:0;background:url(./images/bg2.webp) no-repeat center center/cover;font-family:"Poppins",sans-serif;color:#fff;text-align:center;overflow-x:hidden;position:relative}
h1{margin-top:20px;font-size:2em;text-shadow:0 2px 8px rgba(0,0,0,.4)}
.tree-container{position:relative;display:inline-block;margin:-40px auto;width:min(90vw,600px)}
.tree{width:100%;height:auto;display:block}
.ornaments-grid{position:absolute;top:3%;left:0;width:100%;height:88%;display:flex;flex-direction:column;justify-content:space-evenly;align-items:center;pointer-events:none}
.row{display:flex;justify-content:center;gap:clamp(6px,0.8vw,12px);pointer-events:none}
.ornament{width:clamp(20px,2.2vw,32px);height:clamp(20px,2.2vw,32px);background-size:contain;background-repeat:no-repeat;background-position:center;pointer-events:auto;cursor:pointer;transition:transform .2s;animation:glow 3s infinite alternate;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}
.ornament:hover{transform:scale(1.08)}
@keyframes glow{from{box-shadow:0 0 10px rgba(255,255,255,.35)}to{box-shadow:0 0 20px rgba(255,255,255,.95)}}
.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.7);justify-content:center;align-items:center;z-index:20}
.modal-content{background:#fff;color:#000;padding:20px;border-radius:16px;width:min(92vw,380px);box-shadow:0 0 20px rgba(255,255,255,.4)}
.modal-content input{width:100%;padding:12px;margin:10px 0;border-radius:10px;border:1px solid #ccc}
button{background:#e60000;color:#fff;border:none;padding:10px 15px;border-radius:10px;cursor:pointer}
button:hover{background:#990000}
#closeModal{background:gray}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:rgba(255,255,255,.92);color:#000;padding:10px 20px;border-radius:12px;box-shadow:0 0 10px rgba(255,255,255,.3);font-size:1em;opacity:0;animation:fadeInOut 3s ease forwards;z-index:30}
@keyframes fadeInOut{0%{opacity:0;transform:translate(-50%,20px)}10%,90%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-10px)}}
.snowflake{position:fixed;top:-10px;color:#fff;font-size:1em;opacity:.9;user-select:none;pointer-events:none;animation:fall linear infinite;z-index:5}
@keyframes fall{0%{transform:translateY(0) rotate(0);opacity:1}100%{transform:translateY(100vh) rotate(360deg);opacity:.6}}
.ornament.glow{filter:drop-shadow(0 0 12px gold) brightness(1.3);animation:glowPulse 1.5s ease-in-out infinite;pointer-events:none;opacity:1}
@keyframes glowPulse{0%{filter:drop-shadow(0 0 4px gold) brightness(1.1)}50%{filter:drop-shadow(0 0 18px gold) brightness(1.6)}100%{filter:drop-shadow(0 0 4px gold) brightness(1.1)}}
.ornament.glow{animation:glowPulse 1.8s infinite ease-in-out,glowSparkle 3s infinite linear;box-shadow:0 0 15px 6px rgba(255,255,150,.8);border-radius:50%}
@keyframes glowSparkle{0%,100%{filter:brightness(1)}40%{filter:brightness(1.25)}70%{filter:brightness(.9)}}
.ornament.glow{position:relative;z-index:2}
.ornament.glow::after{content:"";position:absolute;top:-12px;left:-12px;width:calc(100% + 24px);height:calc(100% + 24px);border-radius:50%;border:4px solid rgba(255,255,180,.9);box-shadow:0 0 20px 10px rgba(255,255,180,.7);animation:rotateHalo 3.5s linear infinite;pointer-events:none}
@keyframes rotateHalo{0%{transform:rotate(0);opacity:.9}50%{opacity:1}100%{transform:rotate(360deg);opacity:.9}}
footer{text-align:center;margin-top:-60px;padding-bottom:30px;opacity:.8;color:#000}
span{color:#004d00}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes popIn{from{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}
@media(max-width:600px){footer{margin-top:60px!important}}
@media(max-width:600px){.ornament.glow{animation:mobileGlow 1.5s infinite ease-in-out!important}@keyframes mobileGlow{0%{box-shadow:0 0 30px rgba(255,255,200,1),0 0 60px rgba(255,255,200,.7);transform:scale(1)}50%{box-shadow:0 0 5px 3px rgba(255,255,255,1);transform:scale(1.08)}100%{box-shadow:0 0 2px 1px rgba(255,255,200,.7);transform:scale(1)}}}
@media only screen and (max-width:768px){.ornament.selected{box-shadow:0 0 40px rgba(255,255,255,.7);animation:rainbowGlow 1s infinite alternate}@keyframes rainbowGlow{0%{box-shadow:0 0 80px rgba(255,0,0,1)}25%{box-shadow:0 0 80px rgba(255,165,0,1)}50%{box-shadow:0 0 80px rgba(255,255,0,1)}75%{box-shadow:0 0 80px rgba(0,255,0,1)}100%{box-shadow:0 0 80px rgba(0,0,255,1)}}}
@media(max-width:600px){.ornament.glow::after{display:none!important}.ornament.glow{animation:tinyMobileGlow 1.3s infinite ease-in-out!important;box-shadow:0 0 3px 1px rgba(255,255,180,.7)!important}@keyframes tinyMobileGlow{0%{box-shadow:0 0 2px 1px rgba(255,255,180,.6);transform:scale(1)}50%{box-shadow:0 0 6px 2px rgba(255,255,255,1);transform:scale(1.05)}100%{box-shadow:0 0 2px 1px rgba(255,255,180,.6);transform:scale(1)}}}
.reindeer-sleigh{position:fixed;top:10vh;left:100vw;width:250px;height:120px;background-image:url('./images/reinde.png');background-size:contain;background-repeat:no-repeat;background-position:center;z-index:-1;animation:flyAcross 15s linear infinite;pointer-events:none;opacity:.85}
@keyframes flyAcross{0%{left:100vw;transform:translateY(0) scale(1)}50%{transform:translateY(-20px) scale(1.03)}100%{left:-300px;transform:translateY(0) scale(1)}}