#bbApp{position:relative;height:65vh;min-height:420px;border-radius:10px;overflow:hidden;box-shadow:0 4px 18px rgba(0,0,0,.12);border:1px solid #e8e8e8;background:#223340;user-select:none;-webkit-user-select:none;touch-action:manipulation}
#bbApp:fullscreen{width:100vw;height:100vh;border-radius:0;border:none;min-height:0}
#bbApp:-webkit-full-screen{width:100vw;height:100vh;border-radius:0;border:none;min-height:0}
.night #bbApp{border-color:#333}
/* 背景层 */
#bbApp .bb-bg{position:absolute;top:0;left:0;width:100%;height:100%;transition:opacity .3s}
#bbApp .bb-bg.plastic{background:linear-gradient(to bottom,#223340 0,#000 90%)}
#bbApp .bb-bg.emoji{background:linear-gradient(to bottom,#306 0,#102 90%)}
#bbApp .bb-bg.numbers{background:linear-gradient(to bottom,#135 0,#012 90%)}
#bbApp .bb-bg.bubbles{background-color:#020c55;background:url(assets/images/underwater.jpg) center 0 repeat-x;background-size:1200px 700px}
#bbApp .bb-bg.eyes{background:linear-gradient(to bottom,#722 0,#211 90%)}
/* 舞台 */
#bbApp .bb-stage{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;cursor:default}
#bbApp .bb-stage.bb-grab{cursor:grab}
#bbApp .bb-stage.bb-grab:active{cursor:grabbing}
#bbApp .bb-stage:not(.bb-grab){opacity:.4}
/* 小球基础 */
#bbApp .bb-ball{position:absolute;border-radius:50%;will-change:transform;backface-visibility:hidden;user-select:none;cursor:default}
#bbApp .bb-grab .bb-ball{cursor:grab}
#bbApp .bb-grab .bb-ball:active{cursor:grabbing}
/* 塑料球主题 */
#bbApp .bb-stage.plastic .bb-ball{background-image:radial-gradient(circle closest-side at 50% 60%,rgba(255,255,255,.2) 0,rgba(255,255,255,.2) 30%,rgba(255,255,255,.1) 80%,rgba(0,0,0,.2) 130%)}
#bbApp .bb-stage.plastic .bb-ball:after{content:"";position:absolute;left:19%;top:2%;width:62%;height:44%;border-radius:50%;background:linear-gradient(to bottom,rgba(255,255,255,.7) 0,rgba(255,255,255,.1) 100%)}
#bbApp .bb-stage.plastic .bb-ball.white{background-color:#fff}
#bbApp .bb-stage.plastic .bb-ball.purple{background-color:#90f}
#bbApp .bb-stage.plastic .bb-ball.yellow{background-color:#fb0}
#bbApp .bb-stage.plastic .bb-ball.pink{background-color:#f09}
#bbApp .bb-stage.plastic .bb-ball.green{background-color:#3d0}
#bbApp .bb-stage.plastic .bb-ball.red{background-color:red}
#bbApp .bb-stage.plastic .bb-ball.orange{background-color:#f50}
#bbApp .bb-stage.plastic .bb-ball.blue{background-color:#03f}
#bbApp .bb-stage.plastic .bb-ball.cyan{background-color:#0ee}
#bbApp .bb-stage.plastic .bb-ball.black{background-color:#445}
/* 表情主题 */
#bbApp .bb-stage.emoji .bb-ball{border-radius:0;background-image:url(assets/images/emoji-new.png);background-size:600% 600%}
#bbApp .bb-stage.emoji .bb-ball:after{display:none}
@media(-webkit-min-device-pixel-ratio:1.3),(min-resolution:1.3dppx){
    #bbApp .bb-stage.emoji .bb-ball{background-image:url(assets/images/emoji-new-2x.png)}
}
/* 数字主题 */
#bbApp .bb-stage.numbers .bb-ball{background-image:radial-gradient(circle closest-side at 50% 60%,rgba(255,255,255,.2) 0,rgba(255,255,255,.2) 30%,rgba(255,255,255,.1) 80%,rgba(0,0,0,.2) 130%)}
#bbApp .bb-stage.numbers .bb-ball:after{content:"";position:absolute;left:19%;top:2%;width:62%;height:44%;border-radius:50%;background:linear-gradient(to bottom,rgba(255,255,255,.6) 0,rgba(255,255,255,.1) 100%)}
#bbApp .bb-stage.numbers .bb-number{position:absolute;width:100%;top:50%;font-family:"Comic Sans MS",cursive,sans-serif;font-size:32px;margin-top:-20px;text-align:center;pointer-events:none;text-shadow:0 0 4px rgba(0,0,0,.5)}
#bbApp .bb-stage.numbers .bb-ball.n1{background-color:red}
#bbApp .bb-stage.numbers .bb-ball.n2{background-color:#14f}
#bbApp .bb-stage.numbers .bb-ball.n3{background-color:#ea0}
#bbApp .bb-stage.numbers .bb-ball.n4{background-color:#3c0}
#bbApp .bb-stage.numbers .bb-ball.n5{background-color:#632}
#bbApp .bb-stage.numbers .bb-ball.n6{background-color:#f4a}
#bbApp .bb-stage.numbers .bb-ball.n7{background-color:#90f}
#bbApp .bb-stage.numbers .bb-ball.n8{background-color:#f60}
#bbApp .bb-stage.numbers .bb-ball.n9{background-color:#0cd}
#bbApp .bb-stage.numbers .bb-ball.n10{letter-spacing:-1px;color:#334;background-color:#fff;text-shadow:0 0 4px rgba(0,0,0,.25)}
/* 气泡主题 */
#bbApp .bb-stage.bubbles .bb-ball{box-shadow:inset 0 10px 30px 5px rgba(150,200,255,.5);background-image:radial-gradient(circle farthest-corner at 50% 60%,rgba(100,150,255,.1) 0,rgba(100,150,255,.2) 40%,rgba(100,150,255,.3) 55%)}
#bbApp .bb-stage.bubbles .bb-ball:after{content:"";position:absolute;top:4%;left:10%;width:80%;height:80%;border-radius:100%;background:radial-gradient(circle farthest-corner at 50% 80%,rgba(255,255,255,0) 0,rgba(255,255,255,0) 74%,#fff 80%,#fff 84%,rgba(255,255,255,0) 100%)}
/* 眼球主题 */
#bbApp .bb-stage.eyes .bb-ball{background-color:#fcfcfc;background-image:radial-gradient(circle farthest-corner at 50% 50%,#fcfcfc 0,#f9eff0 62%,#944 100%)}
#bbApp .bb-stage.eyes .bb-ball:after{display:none}
@keyframes bbEyeAnim{0%,100%{transform:translateZ(0)}10%,35%{transform:translateX(-40%) translateY(40%) skewX(15deg) skewY(-10deg) scale(.95)}40%,50%{transform:translateZ(0)}65%,85%{transform:translateX(40%) translateY(-40%) skewX(5deg) skewY(2deg) scaleX(.95)}}
#bbApp .bb-outer-iris{position:absolute;width:48%;height:48%;margin:26%;border-radius:50%;will-change:transform;animation:bbEyeAnim 6s ease infinite;pointer-events:none}
#bbApp .bb-iris{position:relative;margin:3%;width:94%;height:94%;border-radius:50%}
#bbApp .bb-iris:before{content:"";display:block;position:absolute;width:37.5%;height:37.5%;border-radius:50%;top:31.25%;left:31.25%;background-color:#000}
#bbApp .bb-iris:after{content:"";display:block;position:absolute;width:31.25%;height:31.25%;border-radius:50%;top:18.75%;left:18.75%;background-color:rgba(255,255,255,.2)}
#bbApp .bb-ball.blue .bb-iris{background-color:#5af;background-image:radial-gradient(circle farthest-corner at 50% 50%,#5af 30%,#36b 100%)}
#bbApp .bb-ball.green .bb-iris{background-color:#ad6;background-image:radial-gradient(circle farthest-corner at 50% 50%,#ad6 30%,#483 100%)}
#bbApp .bb-ball.brown .bb-iris{background-color:#853;background-image:radial-gradient(circle farthest-corner at 50% 50%,#853 30%,#531 100%)}
#bbApp .bb-ball.gray .bb-iris{background-color:#999;background-image:radial-gradient(circle farthest-corner at 50% 50%,#999 30%,#666 100%)}
/* 菜单控件 */
#bbApp .bb-menu{position:absolute;right:14px;top:14px;min-width:94px;text-align:center;user-select:none;z-index:10;opacity:0;transition:opacity .3s;pointer-events:none}
#bbApp .bb-menu.visible{opacity:1;pointer-events:auto}
#bbApp .bb-menu h2{font-size:14px;font-weight:500;text-transform:uppercase;margin:0 0 4px;color:#fff;max-width:120px;pointer-events:none;text-shadow:0 1px 3px rgba(0,0,0,.5)}
#bbApp .bb-menu fieldset{border:0;padding:0;margin:0}
#bbApp .bb-item{margin-bottom:10px;position:relative}
#bbApp .bb-item.mic{margin-bottom:16px}
#bbApp .bb-item.mic .bb-icon{width:64px;height:64px;margin:0 auto;border-radius:50%;background-size:92% 92%;background-repeat:no-repeat;background-position:50% 38%;cursor:pointer;opacity:.6;transition:opacity .15s}
#bbApp .bb-item.mic .bb-icon:hover,#bbApp .bb-item.mic .bb-icon:active{opacity:1}
#bbApp .bb-item.mic .bb-icon.on{background-image:url(assets/images/microphone-on.svg)}
#bbApp .bb-item.mic .bb-icon.off{background-image:url(assets/images/microphone-off.svg)}
/* 滑块 */
#bbApp .bb-range{width:110px;height:40px;padding-top:2px;opacity:.6;transition:opacity .15s;cursor:col-resize;margin:0 auto}
#bbApp .bb-range:hover,#bbApp .bb-range:active{opacity:1}
#bbApp .bb-range .bb-track{position:relative;width:100%;height:1px;top:16px;background-color:#fff;pointer-events:none}
#bbApp .bb-range .bb-thumb{position:relative;width:16px;height:16px;top:8px;border-radius:50%;background-color:#fff;pointer-events:none;box-shadow:0 1px 4px rgba(0,0,0,.3)}
/* 主题选择 */
#bbApp .bb-item .bb-list input[type="radio"]{appearance:none;-webkit-appearance:none;display:none}
#bbApp .bb-item .bb-list label{display:block;margin:0 auto;line-height:1.6;width:90px;opacity:.5;transition:opacity .15s;cursor:pointer;color:#fff;font-size:14px}
#bbApp .bb-item .bb-list label:hover{opacity:1}
#bbApp .bb-item .bb-list input:checked+label{opacity:1;font-weight:600}
/* 声音警示 */
#bbApp .bb-checkbox{margin:6px auto 0;width:28px;height:28px;border-radius:50%;position:relative}
#bbApp .bb-checkbox input{display:none}
#bbApp .bb-checkbox label{position:absolute;display:block;width:28px;height:28px;border-radius:50%;background:url(assets/images/circle.svg) center/28px no-repeat;opacity:.6;cursor:pointer;transition:opacity .15s}
#bbApp .bb-checkbox label:hover{opacity:1}
#bbApp .bb-checkbox label:after{content:"";position:absolute;width:12px;height:6px;left:6px;top:9px;border:2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg);opacity:0}
#bbApp .bb-checkbox input:checked+label:after{opacity:1}
#bbApp .bb-item.noise .bb-list{margin-top:8px;display:none}
#bbApp .bb-item.noise .bb-list label{font-size:13px}
/* 噪音警示文字 */
#bbApp .bb-noise-alert{position:absolute;top:50%;left:0;right:0;text-align:center;z-index:5;pointer-events:none;opacity:0;transition:opacity .3s}
#bbApp .bb-noise-alert h3{font-size:90px;font-weight:900;color:#fff;margin:-160px 0 0;text-shadow:0 0 20px rgba(255,0,0,.8),0 0 40px rgba(255,0,0,.5);display:none}
/* 开场引导 */
#bbApp .bb-intro-main{position:absolute;top:0;left:0;width:100%;height:100%;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .3s,top .3s;opacity:0}
#bbApp .bb-intro-main.fade{opacity:1}
#bbApp .bb-intro-main.drop{top:125%;opacity:0}
#bbApp .bb-intro-main h1{font-size:120px;color:#fff;margin:0;line-height:.9;text-shadow:0 0 8px #000,0 0 32px #000;letter-spacing:4px}
#bbApp .bb-intro-main .bb-button{margin-top:60px;cursor:pointer}
#bbApp .bb-intro-main .bb-button p{font-size:24px;color:#fff;background:rgba(255,255,255,.25);padding:12px 40px;border-radius:30px;margin:0;text-transform:uppercase;letter-spacing:2px;transition:background-color .15s;user-select:none}
#bbApp .bb-intro-main .bb-button p:hover{background:#90f}
#bbApp .bb-intro-main .bb-privacy{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);font-size:13px;color:#aaa;text-shadow:0 1px 3px #000;white-space:nowrap}
#bbApp .bb-intro-main .bb-privacy a{color:#fff;text-decoration:none}
/* 介绍文字 */
#bbApp .bb-intro-text{position:absolute;top:50%;width:100%;margin-top:-20px;text-align:center;z-index:15;opacity:0;transition:opacity .3s;pointer-events:none}
#bbApp .bb-intro-text p{font-size:18px;line-height:1.6;margin:0;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.6)}
#bbApp .bb-intro-text .bb-description{display:none}
#bbApp .bb-intro-text.error{display:none}
/* 全屏按钮 */
#bbApp .bb-fs-btn{position:absolute;top:10px;left:10px;z-index:25;width:40px;height:40px;border-radius:8px;background:rgba(255,255,255,.9);box-shadow:0 2px 8px rgba(0,0,0,.2);display:flex;align-items:center;justify-content:center;cursor:pointer;color:#333;transition:all .2s;border:none}
#bbApp .bb-fs-btn:hover{background:#fff}
#bbApp .bb-fs-btn svg{width:20px;height:20px}
#bbApp .bb-fs-btn .bb-icon-exit{display:none}
#bbApp .bb-fs-btn.fs-on .bb-icon-enter{display:none}
#bbApp .bb-fs-btn.fs-on .bb-icon-exit{display:block}
/* 说明卡片 */
.bb-intro{background:linear-gradient(135deg,#eef5ff 0%,#f7f0ff 100%);border:1px solid #e3ecff;border-radius:10px;padding:16px 22px 14px;margin-top:15px}
.bb-intro h3{font-size:20px;color:#1f2a44;margin:8px 0;font-weight:700}
.bb-intro p{font-size:14px;color:#4a5578;line-height:1.8;margin:6px 0}
.night .bb-intro{background:linear-gradient(135deg,#1a2332 0%,#1f1a2e 100%);border-color:#2a3a5a}
.night .bb-intro h3{color:#dde4f0}
.night .bb-intro p{color:#9aa8c0}
/* 响应式 */
@media(max-width:768px){
    #bbApp{height:55vh;min-height:340px}
    #bbApp .bb-intro-main h1{font-size:72px}
    #bbApp .bb-intro-main .bb-button{margin-top:40px}
    #bbApp .bb-intro-main .bb-button p{font-size:18px;padding:10px 28px}
    #bbApp .bb-menu{right:8px;top:8px}
    #bbApp .bb-menu h2{font-size:12px}
    #bbApp .bb-item.mic .bb-icon{width:48px;height:48px}
    #bbApp .bb-range{width:80px}
    #bbApp .bb-noise-alert h3{font-size:56px;margin-top:-100px}
    #bbApp .bb-item .bb-list label{font-size:12px;width:70px}
}
@media(max-height:560px){
    #bbApp{min-height:300px}
    #bbApp .bb-item.mic .bb-icon{width:44px;height:44px}
    #bbApp .bb-menu h2,#bbApp .bb-menu label{font-size:11px}
    #bbApp .bb-item.noise{display:none}
}
/* ========== 分贝显示仪表条 ========== */
.bb-db-meter{display:flex;align-items:center;gap:14px;margin:12px 0;padding:12px 16px;border-radius:10px;background:#f7f8fa;border:1px solid #e8e8e8;font-family:-apple-system,"Segoe UI","Microsoft YaHei",sans-serif;transition:background .3s,border-color .3s}
.night .bb-db-meter{background:#1e1e24;border-color:#333}
.bb-db-value{flex:0 0 auto;min-width:80px;text-align:center}
.bb-db-value .num{font-size:28px;font-weight:700;line-height:1;color:#333;font-variant-numeric:tabular-nums}
.bb-db-value .unit{font-size:13px;color:#999;margin-left:2px}
.bb-db-value.off .num{color:#bbb}
.night .bb-db-value .num{color:#eee}
.night .bb-db-value.off .num{color:#555}
.bb-db-bar-wrap{flex:1 1 auto;position:relative;height:14px;border-radius:7px;background:linear-gradient(to right,#4caf50 0%,#8bc34a 35%,#ffc107 55%,#ff9800 75%,#f44336 100%);opacity:.35;transition:opacity .3s}
.bb-db-bar-wrap.active{opacity:1}
.bb-db-pointer{position:absolute;top:-4px;width:4px;height:22px;border-radius:2px;background:#222;box-shadow:0 0 4px rgba(0,0,0,.4);left:0%;transform:translateX(-50%);transition:left .08s linear}
.night .bb-db-pointer{background:#fff;box-shadow:0 0 4px rgba(255,255,255,.4)}
.bb-db-status{flex:0 0 auto;min-width:60px;text-align:center;font-size:13px;font-weight:600;color:#666}
.bb-db-status .state{display:block}
.bb-db-status .hint{display:block;font-size:11px;font-weight:400;color:#aaa;margin-top:2px}
.night .bb-db-status{color:#aaa}
.night .bb-db-status .hint{color:#777}
.bb-db-status.s-quiet .state{color:#4caf50}
.bb-db-status.s-normal .state{color:#ff9800}
.bb-db-status.s-loud .state{color:#f44336}
.bb-db-scale{display:flex;justify-content:space-between;margin-top:4px;padding:0 2px;font-size:10px;color:#bbb}
.night .bb-db-scale{color:#666}
@media(max-width:600px){
    .bb-db-meter{flex-wrap:wrap;gap:8px;padding:10px}
    .bb-db-value{min-width:60px}
    .bb-db-value .num{font-size:22px}
    .bb-db-status{min-width:100%}
}