.hl-bubble{
background:#fff;
padding:12px 16px;
border-radius:10px;
box-shadow:0 4px 12px rgba(0,0,0,0.25);
font-weight:bold;
max-width:220px;
text-align:center;
}

.hl-mayor{
position:fixed;
bottom:20px;
right:-300px;
display:flex;
align-items:flex-end;
gap:10px;
z-index:999999;
animation:mayorIn 0.8s forwards;
}

.hl-mayor.slideOut{
animation:mayorOut 0.8s forwards;
}

@keyframes mayorIn{
to{right:20px;}
}

@keyframes mayorOut{
to{right:-300px;}
}

.hl-mayor img{
width:120px;
}

.hl-coffee{
position:fixed;
top:40%;
left:50%;
transform:translate(-50%,-50%);
display:flex;
flex-direction:column;
align-items:center;
gap:6px;
z-index:999999;
}

.hl-coffee img{
width:120px;
}

.steam{
width:24px;
height:50px;
background:radial-gradient(ellipse at center, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 70%);
animation:steam 2s infinite;
}

@keyframes steam{
0%{transform:translateY(10px);opacity:0}
40%{opacity:1}
100%{transform:translateY(-25px);opacity:0}
}


.hl-kupfer{
position:fixed;
top:50%;
left:50%;
transform:translate(-50%,-50%) scale(0.95);
opacity:0;
z-index:999999;
display:flex;
flex-direction:column;
align-items:center;
gap:10px;
transition:all .6s ease;
}

.hl-kupfer.visible{
opacity:1;
transform:translate(-50%,-50%) scale(1);
}

.hl-kupfer.fadeOut{
opacity:0;
}

.hl-kupfer img{
width:220px;
}

.hl-mining-light{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
pointer-events:none;
z-index:999998;
background: radial-gradient(circle at center, rgba(255,200,80,0.35) 0%, rgba(255,200,80,0.15) 40%, rgba(0,0,0,0) 70%);
animation: miningGlow 0.9s ease;
}

@keyframes miningGlow{
0%{opacity:0}
40%{opacity:1}
100%{opacity:0}
}

.hl-progress{
position:fixed;
bottom:20px;
left:50%;
transform:translateX(-50%);
background:#000;
color:#fff;
padding:10px 14px;
border-radius:8px;
z-index:999999;
white-space:pre;
}