.game-head{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.game-thumb{border-radius:16px;flex:none;box-shadow:0 6px 14px rgba(120,180,255,.3)}
.game-head h1{margin:0;font-size:26px;color:#5a4a6a;text-shadow:0 2px 0 #fff}
.game-head .sub{margin:2px 0 0;color:#9a86ad;font-size:14px}

.bp-wrap { max-width: 560px; margin: 0 auto; }
.bp-top { display: flex; align-items: center; gap: 12px; margin: 6px 0 12px; }
.bp-score { font-weight: 800; color: #fff; background: #4aa3ff; border-radius: 999px;
  padding: 5px 14px; white-space: nowrap; box-shadow: 0 3px 0 #2b83e0; }
.bp-puff { position: relative; flex: 1 1 auto; height: 16px; border-radius: 999px;
  background: #e3edf6; box-shadow: inset 0 0 0 2px #cfe0ee; overflow: hidden; }
.bp-puff-fill { position: absolute; inset: 0; width: 100%; transform-origin: left center;
  background: linear-gradient(90deg, #7ad0ff, #4aa3ff); border-radius: 999px;
  transition: width .08s linear; }
.bp-puff-fill.low { background: linear-gradient(90deg, #ffcf6b, #ff9d4a); }

.bp-board-wrap { position: relative; border-radius: 20px; overflow: hidden;
  background: linear-gradient(#bfe4ff 0%, #d7f0ff 55%, #cdf0d6 100%);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.5), 0 10px 30px rgba(80,140,200,.2); }
#bpBoard { width: 100%; display: block; touch-action: none; cursor: crosshair; }