html, body { margin:0; padding:0; font-family:sans-serif; overflow-x:hidden; background:#111; }
#gameContainer { max-width:500px; margin:0 auto; padding:10px; position:relative; }
#coinDisplay { position:fixed; left:10px; top:10px; color:#fff; font-weight:bold; z-index:200; }

.bottleRow { display:flex; justify-content:center; margin-bottom:10px; }
.bottle { width:50px; height:180px; margin:0 5px; background:#222; border-radius:10px; position:relative; display:flex; flex-direction:column-reverse; justify-content:flex-start; align-items:center; }
.ball { width:40px; height:40px; border-radius:50%; margin-bottom:5px; background: radial-gradient(circle at var(--hx,30%) var(--hy,30%), rgba(255,255,255,0.7), rgba(0,0,0,0.4)); box-shadow: 0 4px 8px rgba(0,0,0,0.5), inset 0 -4px 6px rgba(255,255,255,0.5); cursor:pointer; transition: background 0.1s; }

#bottomControls { position:fixed; bottom:0; left:0; width:100%; display:flex; justify-content:space-around; align-items:center; background:rgba(0,0,0,0.7); padding:5px; z-index:100; }
#bottomControls button { padding:5px 10px; border:none; border-radius:5px; background:#333; color:#fff; cursor:pointer; }
#bannerContainer { display:flex; overflow:hidden; width:300px; height:60px; }
.bannerImg { width:100%; flex-shrink:0; transition:transform 0.5s; }

#winModal, #levelSelectModal, #leaderboardModal {
  display:none; position:fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.6); justify-content:center; align-items:center; z-index:100;
}
#winContent, #levelSelectContent, #leaderboardContent { background:#222; color:#fff; padding:20px; border-radius:10px; text-align:center; max-width:90%; }

.winBall { width:40px; height:40px; border-radius:50%; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.8), rgba(0,0,0,0.4)); box-shadow:0 4px 8px rgba(0,0,0,0.5), inset 0 -4px 6px rgba(255,255,255,0.5); animation: spinBall 2s linear infinite; display:inline-block; margin:3px; }
@keyframes spinBall {0%{transform:rotate(0deg) scale(1);}50%{transform:rotate(180deg) scale(1.1);}100%{transform:rotate(360deg) scale(1);}}

.winCoin { display:inline-block; width:20px;height:20px; background:radial-gradient(circle at 30% 30%, #ffd700,#ffaa00); border-radius:50%; margin:0 3px; animation: coinBlink 0.6s ease-in-out infinite alternate; }
@keyframes coinBlink { 0%{transform:scale(1);opacity:0.6;}100%{transform:scale(1.3);opacity:1;} }

.flyCoin { position:absolute; width:20px;height:20px; background:radial-gradient(circle at 30% 30%, #ffd700,#ffaa00); border-radius:50%; pointer-events:none; z-index:150; transition:all 0.6s linear; }
.particle { position:absolute; width:6px;height:6px; border-radius:50%; background:gold; pointer-events:none; opacity:1; box-shadow:0 0 4px gold; }

@keyframes glowPulse {0%{box-shadow:0 4px 8px rgba(0,0,0,0.5), inset 0 -4px 6px rgba(255,255,255,0.5);}50%{box-shadow:0 6px 12px rgba(0,0,0,0.6), inset 0 -6px 8px rgba(255,255,255,0.8);}100%{box-shadow:0 4px 8px rgba(0,0,0,0.5), inset 0 -4px 6px rgba(255,255,255,0.5);}}

#levelGrid { display:grid; grid-template-columns:repeat(8,1fr); gap:5px; max-height:80vh; overflow-y:auto; margin-top:10px; }
#levelGrid button { padding:10px; border:none; border-radius:5px; background:#333; color:#fff; cursor:pointer; }
#leaderboardList { max-height:60vh; overflow-y:auto; margin-top:10px; text-align:left; }