:root{
  --bg:#0b1220;
  --tree:#0b7a2a;
  --trim:#3c6;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,system-ui,Segoe UI,Helvetica,Arial;color:#fff;background:linear-gradient(180deg,var(--bg),#07101a);}
main{max-width:980px;margin:28px auto;padding:16px}
h1{text-align:center;font-weight:600;margin:0 0 12px}
#game{display:flex;justify-content:center;margin:12px 0}
#tree{position:relative;width:420px;height:520px}
/* tree shape */
#tree{background:radial-gradient(ellipse at center, rgba(255,255,255,0.02) 0%, transparent 40%);border-radius:10px}

/* SVG-based tree visuals */
#tree-svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible}

/* trunk (svg fallback) */
#tree::after{content:"";position:absolute;left:50%;transform:translateX(-50%);width:60px;height:80px;background:linear-gradient(180deg,#6b4725,#3f2410);border-radius:6px;bottom:6px}
#garland{position:absolute;left:50%;transform:translateX(-50%);top:70px;width:420px;height:420px;pointer-events:none}
/* simple garland stripes */
#garland::before,#garland::after{content:"";position:absolute;left:0;right:0;margin:auto;height:10px;border-radius:999px;background:linear-gradient(90deg,#ffd2f0 10%,#ff7a7a 40%,#fff58a 60%,#9aff9a 90%);opacity:0.12}
#garland::before{top:120px;width:360px}
#garland::after{top:220px;width:320px}

#tree #trail{pointer-events:none}

#bulbs{position:absolute;left:0;right:0;top:60px;bottom:40px}
.bulb{position:absolute;width:26px;height:26px;border-radius:50%;background:#222;box-shadow:inset -3px -3px 6px rgba(0,0,0,0.6);cursor:pointer;transition:transform .08s, box-shadow .12s, filter .12s}
.bulb:active{transform:scale(.95)}
.bulb::after{content:"";position:absolute;left:50%;top:4px;transform:translateX(-50%);width:8px;height:8px;border-radius:2px;background:rgba(255,255,255,0.6)}
.bulb.lit{filter:brightness(1.6) drop-shadow(0 6px 12px rgba(255,200,80,0.25));box-shadow:0 0 8px rgba(255,255,200,0.6)}

/* different colors */
.c-red{background:radial-gradient(circle at 35% 25%,#ff7a7a,#c30000)}
.c-green{background:radial-gradient(circle at 35% 25%,#9aff9a,#006600)}
.c-blue{background:radial-gradient(circle at 35% 25%,#7ad0ff,#005e9e)}
.c-yellow{background:radial-gradient(circle at 35% 25%,#fff58a,#d6a800)}
.c-pink{background:radial-gradient(circle at 35% 25%,#ffc0e0,#d0006b)}
.c-cyan{background:radial-gradient(circle at 35% 25%,#aef9ff,#007b83)}

/* failure flash */
.shake{animation:shake .45s}
@keyframes shake{0%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}100%{transform:translateX(0)}}

/* success glow and blinking */
#tree.success::before{filter:drop-shadow(0 12px 40px rgba(200,220,140,0.25));}
.bulb.success-blink{animation:blink 1s infinite}
@keyframes blink{0%{opacity:1}50%{opacity:.3}100%{opacity:1}}

/* subtle background twinkle */
body::before{content:"";position:fixed;left:0;top:0;right:0;bottom:0;background-image:radial-gradient(rgba(255,255,255,0.03) 1px, transparent 1px);background-size:120px 120px;pointer-events:none;opacity:0.12}

#tree.success::before{filter:drop-shadow(0 18px 60px rgba(200,220,140,0.35));}

/* secret reveal box */
#secret{max-width:720px;margin:18px auto;padding:18px;border-radius:12px;background:linear-gradient(90deg,#fffaf0,#ffe7c7);color:#18322a;text-align:center;box-shadow:0 8px 30px rgba(0,0,0,.28)}
#secret.hidden{display:none}
#secret.revealed{display:block;animation:pop .6s cubic-bezier(.2,.9,.3,1) both}
@keyframes pop{0%{transform:scale(.8);opacity:0}60%{transform:scale(1.04);opacity:1}100%{transform:scale(1);opacity:1}}


#info{max-width:980px;margin:12px auto;text-align:center}
.controls{display:flex;justify-content:center;gap:12px;align-items:center;margin-top:8px}
button{background:#fff;color:#07202a;padding:8px 12px;border-radius:8px;border:none;cursor:pointer}
button:hover{opacity:.95}
#progress{font-weight:600}

@media (max-width:520px){#tree{width:300px;height:380px}#tree::before{border-left:150px solid transparent;border-right:150px solid transparent;border-bottom:300px solid var(--tree)}
  .bulb{width:20px;height:20px}}