* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; overflow: hidden;
  font-family: "PingFang TC", "Microsoft JhengHei", sans-serif;
  background: linear-gradient(180deg, #d0bfff 0%, #fff0f6 75%, #b2f2bb 75%, #8ce99a 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); border: 0; font-size: 1rem; font-family: inherit; }
.pill.on { background: #ffd43b; }
#muteBtn { cursor: pointer; }

.stage { position: relative; width: 100vw; height: 100vh; }
#field { position: absolute; inset: 0; }

.block {
  position: absolute; top: 0; left: 0; width: 96px; height: 96px; margin-left: -48px;
  border-radius: 18px; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: 0 6px 14px rgba(0,0,0,.25); border: 4px solid rgba(255,255,255,.7); will-change: transform;
}
.block .arrow { font-size: 2.6rem; line-height: 1; font-weight: bold; }
.block .label { font-size: .9rem; margin-top: 2px; }
.block.left { background: #339af0; }
.block.right { background: #ff922b; }
.block.down { background: #20c997; }
.block.stretch { background: #f06595; }
.block.caught { animation: caught .4s ease-out forwards; border-color: #ffd43b; }
.block.missed { opacity: .5; filter: grayscale(.8); transition: opacity .6s; }
@keyframes caught { to { transform: var(--t) scale(1.6); opacity: 0; } }

.player { position: absolute; bottom: 4%; left: 50%; width: 160px; height: 260px; margin-left: -80px; transition: left .35s ease-out; }
.player svg { width: 100%; height: 100%; }
.player.happy { animation: hop .35s; }
@keyframes hop { 40% { transform: translateY(-24px); } }
.bubble { position: absolute; left: 50%; top: -34px; transform: translateX(-50%); background: #fff; border-radius: 999px; padding: 2px 14px; font-size: 1.4rem; font-weight: bold; box-shadow: 0 2px 8px rgba(0,0,0,.2); white-space: nowrap; }
.bubble:empty { display: none; }

.cam {
  position: absolute; right: 16px; top: 60px; width: 200px; height: 150px;
  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: 440px; line-height: 1.6; }
.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; }
.btns { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.box button.btn-sub { background: #868e96; font-size: 1rem; padding: 8px 28px; }
.block.up { background: #7950f2; }
.settings { display: flex; flex-direction: column; gap: 10px; margin: 0 0 18px; text-align: left; }
.opt { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border: 2px solid #dee2e6; border-radius: 12px; cursor: pointer; }
.opt:has(input[type=radio]:checked) { border-color: #ff6b6b; background: #fff5f5; }