:root{
  --bg:#07071a;
  --card:#0e0e25;
  --accent1: #7afcff;
  --accent2: #ff7aa2;
  --glass: rgba(255,255,255,0.04);
  --glow: 0 12px 40px rgba(122,255,255,0.12), 0 0 80px rgba(122,255,255,0.06);
  --ui-font: "Segoe UI", Roboto, system-ui, -apple-system, "Helvetica Neue", Arial;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:var(--ui-font);background:
 radial-gradient(1000px 400px at 10% 10%, rgba(122,255,255,0.03), transparent),
 radial-gradient(800px 300px at 90% 80%, rgba(255,122,162,0.03), transparent),
 var(--bg); color:#e6eef8;}

.app{max-width:1100px;margin:28px auto;padding:18px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.04));box-shadow: 0 6px 30px rgba(0,0,0,0.6);}
.app-header{display:flex;flex-direction:column;gap:10px;padding:10px 12px}
h1{margin:0;font-size:28px;letter-spacing:0.4px}
.subtitle{margin:0;color:#cfe8ff;font-size:13px}
.controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:6px}
.btn{background:linear-gradient(180deg,#1a1a3a,#0f0f24);border:1px solid rgba(255,255,255,0.05);padding:8px 12px;border-radius:8px;color:#e6eef8;cursor:pointer;box-shadow:var(--glow);font-weight:600}
.btn:active{transform:translateY(1px)}
.control-inline{display:inline-flex;align-items:center;gap:8px;color:#bcdcff;font-size:13px}
.control-inline input[type="range"]{width:110px}
.control-inline select{background:var(--glass);padding:6px;border-radius:6px;border:1px solid rgba(255,255,255,0.03);color:#e6eef8}

.score-row{display:flex;gap:20px;margin-top:10px;color:#dff3ff;padding:6px 2px;font-size:15px}

.play-area{
  height:560px;border-radius:10px;margin-top:12px;padding:10px;background:
  linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.06));
  overflow:hidden;position:relative;border:1px solid rgba(255,255,255,0.03);
  box-shadow: 0 10px 40px rgba(0,0,0,0.6) inset;
}

/* hint text centered */
.hint{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#9fbfe8;opacity:0.9;font-size:18px;padding:12px 18px;background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:10px}

/* Bubble styles */
.bubble{
  position:absolute;border-radius:50%;display:flex;align-items:center;justify-content:center;
  cursor:pointer;user-select:none;
  box-shadow: 0 8px 28px rgba(0,0,0,0.6), 0 0 30px rgba(255,255,255,0.02) inset;
  transition: transform 160ms ease, opacity 220ms ease;
  will-change: transform, opacity, filter;
  border: 1px solid rgba(255,255,255,0.06);
  backdrop-filter: blur(6px);
}

/* bubble content text */
.bubble .label{pointer-events:none;font-weight:700;font-size:12px;color:#051022;text-shadow:0 1px 0 rgba(255,255,255,0.25)}

/* layered glow variations */
.bubble.low { background: linear-gradient(135deg,#ff6b6b,#ffb86b); box-shadow: 0 12px 40px rgba(255,107,107,0.12), 0 0 40px rgba(255,184,107,0.12);}
.bubble.mid { background: linear-gradient(135deg,#6bd6ff,#6bffb8); box-shadow: 0 12px 40px rgba(107,214,255,0.12), 0 0 40px rgba(107,255,184,0.12);}
.bubble.high { background: linear-gradient(135deg,#c86bff,#ff6bd1); box-shadow: 0 12px 40px rgba(200,107,255,0.12), 0 0 40px rgba(255,107,209,0.12);}

/* Large glow ring to emphasize */
.bubble::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;z-index:-1;filter: blur(14px);opacity:0.9;
  transition:opacity 220ms ease, transform 260ms ease;
}

/* pop animation */
@keyframes pop {
  0% { transform: scale(1); opacity:1}
  60% { transform: scale(1.25); opacity:0.95}
  100% { transform: scale(0.2); opacity:0; }
}

/* small particle burst (pseudo) */
.particle {
  position:absolute;width:6px;height:6px;border-radius:50%;opacity:0.95;pointer-events:none;
  transform:translate(-50%,-50%);filter:blur(0.2px);
}

/* footer */
.app-footer{display:flex;justify-content:space-between;align-items:center;margin-top:10px;color:#9fbfe8;font-size:13px;padding:8px}
.legend{display:flex;gap:10px;align-items:center}
.legend .dot{width:14px;height:14px;border-radius:50%;display:inline-block;margin:0 8px 0 6px;box-shadow:0 8px 28px rgba(0,0,0,0.6)}
.credit{opacity:0.7}