/* Bubble Buddies: a cheerful bubble-tapping game for small children. */
.bb-wrap{max-width:min(1140px,max(560px,calc((100vh - 112px) * 1.6)));margin:0 auto}
.bb-tip{display:none;margin:8px 0 0;text-align:center;font-size:12.5px;font-weight:700;color:var(--faint)}
.bb-stage{position:relative;overflow:hidden;border-radius:14px;background:#53b9ff;aspect-ratio:960/600;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.bb-canvas{display:block;width:100%;height:100%;cursor:pointer;touch-action:manipulation}
.bb-hud{position:absolute;left:10px;right:10px;top:8px;display:flex;justify-content:space-between;align-items:flex-start;gap:10px;pointer-events:none;color:#fff}
.bb-hud[hidden],.bb-card[hidden],.bb-faces[hidden]{display:none}
.bb-mid{flex:1;max-width:460px}
.bb-goal{display:inline-block;font:600 15px var(--display);background:rgba(20,60,130,.6);border-radius:99px;padding:3px 16px;letter-spacing:.01em}
.bb-bar{height:12px;border-radius:99px;background:rgba(255,255,255,.55);overflow:hidden;margin:6px 4px 0;box-shadow:inset 0 0 0 2px rgba(255,255,255,.5)}
.bb-bar[hidden]{display:none}
.bb-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ff7eb6,#ffd24a,#5ad66f,#3db8ff);border-radius:99px;transition:width .35s ease}
.bb-faces{display:flex;gap:6px;margin:6px 4px 0}
.bb-face{width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 2px rgba(255,255,255,.7)}
.bb-face.on{background:var(--c);box-shadow:0 0 0 2px #fff}
.bb-btns{display:flex;gap:6px;pointer-events:auto}
.bb-btn{border:0;border-radius:999px;padding:7px 13px;background:rgba(20,60,130,.6);color:#fff;font-weight:700;font-size:12.5px}
.bb-btn:hover{background:rgba(40,100,190,.85)}.bb-btn[hidden]{display:none}
.bb-card{position:absolute;left:50%;top:3%;transform:translateX(-50%);width:min(560px,94%);max-height:94%;overflow:auto;padding:16px 22px 0;border-radius:22px;background:rgba(22,56,120,.94);box-shadow:0 12px 40px rgba(0,0,40,.45),inset 0 0 0 2px rgba(255,255,255,.35);text-align:center;color:#eef6ff}
.bb-card h2{margin:0 0 4px;font-size:32px;line-height:1.05;color:#ffe27a;text-shadow:0 0 18px rgba(255,210,74,.4)}
.bb-sub{margin:0 0 10px;font-size:13.5px;line-height:1.5;color:#d4e6fb}.bb-sub em{font-style:normal;color:#ffe27a}
.bb-lang,.bb-fsrow{display:inline-flex;margin:0 3px 8px;vertical-align:middle}
.bb-lang button,.bb-fsbtn{border:0;border-radius:999px;padding:4px 12px;background:rgba(255,255,255,.14);color:#fff;font-weight:700;font-size:12px}
.bb-lang button[aria-pressed="true"]{background:rgba(255,210,74,.25);box-shadow:inset 0 0 0 2px #ffd24a}
.bb-fsrow[hidden]{display:none}
.bb-field{margin:8px 0}
.bb-field>span{display:block;font:800 11px 'Public Sans',sans-serif;letter-spacing:.09em;text-transform:uppercase;color:#a9cdf3;margin-bottom:6px}
.bb-levels{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.bb-nbtn{min-width:40px;border:0;border-radius:12px;padding:5px 10px;background:rgba(255,255,255,.12);color:#fff;font:800 15px var(--display);line-height:1.1}
.bb-nbtn small{display:block;color:#ffd24a;font-size:10px;letter-spacing:.05em}
.bb-nbtn.bb-free{padding:7px 14px;background:rgba(255,126,182,.3)}
.bb-nbtn[aria-pressed="true"]{background:rgba(255,210,74,.28);box-shadow:inset 0 0 0 2px #ffd24a}
.bb-mtext{margin:8px 0 0;font:600 14px var(--display);color:#fff}
.bb-det{margin:8px 0 0;text-align:left}
.bb-det>summary{cursor:pointer;margin:0;padding:8px 2px;list-style:none;display:flex;align-items:center;gap:8px;user-select:none;font:800 11px 'Public Sans',sans-serif;letter-spacing:.09em;text-transform:uppercase;color:#a9cdf3}
.bb-det>summary::-webkit-details-marker{display:none}
.bb-det>summary::before{content:'\25B8';font-size:12px;color:#ffd24a;transition:transform .15s}
.bb-det[open]>summary::before{transform:rotate(90deg)}
.bb-how{list-style:none;margin:2px 0 6px;padding:0;text-align:left;font-size:13.5px;line-height:1.5;color:#d4e6fb}
.bb-how li{position:relative;padding-left:22px;margin-bottom:4px}.bb-how li::before{content:'\1FAE7';position:absolute;left:0;font-size:13px}.bb-how b{color:#fff}
.bb-foot{position:sticky;bottom:0;z-index:3;margin:10px -22px 0;padding:12px 22px 14px;background:linear-gradient(180deg,rgba(22,56,120,0),rgba(22,56,120,.97) 34%)}
.bb-foot .bb-go{width:100%;margin:0;font-size:18px;padding:11px 20px}
.bb-stars{font-size:44px;letter-spacing:6px;margin:4px 0 8px;line-height:1}
.bb-star{color:rgba(255,255,255,.25)}.bb-star.on{color:#ffd24a;text-shadow:0 0 14px rgba(255,210,74,.7)}
.bb-btnrow{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:6px 0 16px}
.bb-btnrow .g-btn.ghost{color:#ffd24a;box-shadow:inset 0 0 0 2px #ffd24a}.bb-btnrow .g-btn.ghost:hover{background:rgba(255,210,74,.12)}
.bb-wrap.bn *{font-family:'Noto Sans Bengali','Public Sans',sans-serif}
.bb-wrap.bn .bb-card h2{font-weight:600;letter-spacing:0}
.bb-wrap.bn .bb-field>span,.bb-wrap.bn .bb-det>summary{letter-spacing:0;text-transform:none;font-size:13px}
.bb-wrap.bn .bb-how{font-size:14px;line-height:1.7}
@media (max-width:640px) and (orientation:portrait){.bb-tip{display:block}}
@media (max-width:640px){
  .bb-stage{aspect-ratio:auto}
  .bb-canvas{height:auto}
  .bb-card{position:relative;left:auto;top:auto;transform:none;width:auto;max-height:none;margin:8px;border-radius:14px;padding:12px 14px 0}
  .bb-card h2{font-size:26px}.bb-sub{font-size:12.5px}.bb-foot{margin:8px -14px 0;padding:10px 14px 12px}.bb-stars{font-size:32px}
  .bb-hud{left:6px;right:6px;top:5px;gap:6px}.bb-goal{font-size:12px;padding:2px 10px}.bb-btn{padding:5px 9px;font-size:11px}
}

/* fit to the window: Fullscreen fills the whole screen */
.bb-wrap:fullscreen{max-width:none;width:100vw;height:100vh;margin:0;display:flex;align-items:center;justify-content:center;background:#16386f}
.bb-wrap:fullscreen .bb-stage{width:min(100vw,160vh);border-radius:0}.bb-wrap:fullscreen .bb-tip{display:none}
.bb-wrap:-webkit-full-screen{max-width:none;width:100vw;height:100vh;margin:0;display:flex;align-items:center;justify-content:center;background:#16386f}
.bb-wrap:-webkit-full-screen .bb-stage{width:min(100vw,160vh);border-radius:0}.bb-wrap:-webkit-full-screen .bb-tip{display:none}