.bubble-game-container{display:flex;flex-direction:column;align-items:center;justify-content:center;background:#0f0f1a;height:100vh;position:relative;overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:none}.game-canvas{background:#1a1a2e;box-shadow:0 0 var(--space-5) #00f2ff33;border-radius:var(--space-2);max-width:100%;max-height:100%}.game-hud{position:absolute;top:var(--space-5);left:50%;transform:translate(-50%);display:flex;gap:var(--space-5);font-family:Arial,sans-serif;color:#fff;font-size:18px;text-shadow:0 0 5px rgba(0,0,0,.5);pointer-events:none;z-index:10}.score-box,.timer-box{background:#ffffff1a;padding:5px 15px;border-radius:15px;border:1px solid rgba(255,255,255,.2)}.bubble-game-over-modal{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--color-white);padding:var(--space-5) 30px;border-radius:var(--space-4);text-align:center;box-shadow:0 10px 40px #0009;animation:popIn .3s cubic-bezier(.175,.885,.32,1.275);z-index:100;height:auto!important;width:auto!important;min-width:200px;max-width:80%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}.bubble-game-over-modal h2{margin:0 0 5px;color:#333;font-size:var(--space-6);font-weight:800}.bubble-game-over-modal p{margin:5px 0;font-size:var(--space-4);color:#555;white-space:nowrap;font-weight:500}.bubble-game-over-modal button{margin-top:15px;padding:10px 30px;background:linear-gradient(90deg,#00f2ff,#00c3ff);border:none;border-radius:25px;color:var(--color-white);font-weight:700;font-size:var(--space-4);cursor:pointer;transition:transform .1s,box-shadow .2s;box-shadow:0 4px 15px #00f2ff4d}.bubble-game-over-modal button:hover{transform:translateY(-2px);box-shadow:0 6px var(--space-5) #00f2ff66}.bubble-game-over-modal button:active{transform:translateY(1px)}.start-screen{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#1a1a2ed9;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:20;color:#fff;padding:var(--space-5);box-sizing:border-box}.game-title{font-size:var(--space-8);color:#00f2ff;text-shadow:0 0 10px rgba(0,242,255,.5);margin-bottom:var(--space-5)}.rule-card{background:#ffffff1a;padding:15px var(--space-5);border-radius:var(--space-3);border:1px solid rgba(255,255,255,.2);margin-bottom:25px;max-width:320px;width:100%}.rule-card h3{text-align:center;margin-top:0;margin-bottom:10px;color:gold;font-size:18px}.rule-card ul{list-style:none;padding:0;margin:0;text-align:left}.rule-card li{margin-bottom:var(--space-2);font-size:var(--text-sm);display:flex;align-items:center;gap:var(--space-2)}.start-btn{padding:var(--space-3) 40px;background:linear-gradient(45deg,#00f2ff,#00c3ff);border:none;border-radius:25px;color:#fff;font-weight:700;font-size:18px;cursor:pointer;box-shadow:0 0 15px #00f2ff66;transition:all .2s}.start-btn:hover{transform:scale(1.05);box-shadow:0 0 25px #00f2ff99}.controls-hint{position:absolute;bottom:var(--space-5);width:100%;display:flex;justify-content:space-between;padding:0 30px;box-sizing:border-box;pointer-events:none;opacity:.5;color:#fff;font-size:var(--space-3);z-index:10}@keyframes popIn{0%{transform:translate(-50%,-50%) scale(.8);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}@media (max-width: 600px){.game-canvas{width:100vw;height:100vh;border-radius:0}.start-screen{padding:15px}.game-title{font-size:28px;margin-bottom:15px}.rule-card{padding:15px;margin-bottom:var(--space-5);max-width:300px}.rule-card li{font-size:var(--text-sm);margin-bottom:6px}.start-btn{padding:10px 30px;font-size:var(--space-4)}}