* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; overflow: hidden;
  font-family: "PingFang TC", "Microsoft JhengHei", sans-serif;
  background: linear-gradient(180deg, #bfe9ff 0%, #e9f9d8 70%, #9bd67a 70%, #8cc86b 100%);
}
.back { position: fixed; top: 12px; left: 12px; z-index: 5; background: #fff; border-radius: 999px; padding: 6px 14px; text-decoration: none; color: #333; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.hud { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 5; }
.pill { background: #fff; border-radius: 999px; padding: 6px 16px; font-weight: bold; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.pill.on { background: #ffd43b; }

.stage { position: relative; width: 100vw; height: 100vh; }

.balloon-wrap { position: absolute; left: 62%; bottom: 30%; width: 0; height: 0; }
#balloon {
  position: absolute; width: 260px; left: -130px; top: -260px;
  transform-origin: 50% 77%; transform: scale(.25);
  transition: transform .35s cubic-bezier(.3,1.6,.5,1);
}
#balloon.pop { opacity: 0; transform: scale(2) !important; transition: transform .2s, opacity .2s; }
#balloon.sad { filter: grayscale(.8); }
.burst { position: absolute; left: -100px; bottom: 80px; font-size: 200px; line-height: 1; animation: boom .6s ease-out; }
.hidden { display: none; }
@keyframes boom { from { transform: scale(.2); opacity: 1; } to { transform: scale(1.3); opacity: .9; } }

#hose { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.player { position: absolute; left: 12%; bottom: 8%; width: 330px; height: 340px; }
#person { position: absolute; left: 0; bottom: 0; width: 220px; }
#pump { position: absolute; left: 190px; bottom: 0; width: 100px; }
#handle { transition: transform .12s; }
#arm { transition: transform .12s; transform-origin: 140px 159px; }
.player.down #arm { transform: rotate(18deg); }
.player.down #pump #handle { transform: translateY(70px); }
.player.down #cheekL, .player.down #cheekR { r: 20; opacity: 1; }
.player.down #mouth { rx: 5; ry: 5; }
#cheekL, #cheekR { transition: all .12s; }

.cam {
  position: absolute; right: 16px; bottom: 16px; width: 240px; height: 180px;
  border-radius: 12px; overflow: hidden; border: 3px solid #fff; box-shadow: 0 4px 12px rgba(0,0,0,.3); background: #000;
}
.cam video, .cam canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }

.dialog { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; z-index: 10; }
.dialog.hidden { display: none; }
.box { background: #fff; border-radius: 20px; padding: 28px 36px; text-align: center; max-width: 420px; }
.box h2 { margin-top: 0; }
.box button { font-size: 1.1rem; padding: 10px 32px; border: 0; border-radius: 999px; background: #ff6b6b; color: #fff; font-weight: bold; cursor: pointer; }
.box button:disabled { background: #bbb; cursor: default; }

#muteBtn { border: 0; cursor: pointer; font-size: 1rem; }
.btns { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.box button.btn-sub { background: #868e96; font-size: 1rem; padding: 8px 28px; }
.settings { display: flex; flex-direction: column; gap: 10px; margin: 0 0 18px; text-align: left; }
.opt { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border: 2px solid #dee2e6; border-radius: 12px; cursor: pointer; line-height: 2; }
.opt:has(input[type=radio]:checked) { border-color: #ff6b6b; background: #fff5f5; }
.opt input[type=radio] { margin-top: 10px; }
.opt input[type=number] { width: 4.2em; font-size: 1rem; padding: 2px 6px; border: 1px solid #adb5bd; border-radius: 6px; text-align: center; }