* { box-sizing: border-box; }
:root { --surface: 22%; }
body { margin: 0; min-height: 100vh; overflow: hidden; font-family: "PingFang TC", "Microsoft JhengHei", sans-serif; background: #74c0fc; }
.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; align-items: center; }
.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; white-space: nowrap; }
.pill.on { background: #8ce99a; }
.pill.air { display: flex; align-items: center; gap: 8px; }
.bar { width: 120px; height: 12px; background: #dee2e6; border-radius: 999px; overflow: hidden; }
#airFill { height: 100%; width: 100%; background: #4dabf7; transition: background .3s; }
#airFill.low { background: #fa5252; }
#muteBtn { cursor: pointer; }

.stage { position: relative; width: 100vw; height: 100vh; overflow: hidden; }
.sky { position: absolute; left: 0; right: 0; top: 0; height: var(--surface); background: linear-gradient(#bfe9ff, #e7f5ff); }
.sky::after { content: "☀️"; position: absolute; right: 24%; top: 20%; font-size: 3rem; }
.water { position: absolute; left: 0; right: 0; top: var(--surface); bottom: 0; background: linear-gradient(#4dabf7 0%, #1c7ed6 45%, #0b3d73 100%); }
.water::before { content: ""; position: absolute; left: 0; right: 0; top: -6px; height: 12px; background: repeating-radial-gradient(circle at 10px 12px, #a5d8ff 0 6px, transparent 7px 20px); opacity: .8; }
.depth-line { position: absolute; left: 50%; top: var(--surface); bottom: 0; width: 0; border-left: 2px dashed rgba(255,255,255,.25); }

.diver { position: absolute; left: 50%; top: 0; width: 100px; margin-left: -50px; will-change: transform; }
.diver.leak { animation: shake .25s infinite; }
@keyframes shake { 50% { margin-left: -46px; } }
.chest { position: absolute; left: 50%; bottom: 14px; width: 130px; margin-left: -65px; }
#lid { transform-origin: 10px 40px; transition: transform .6s; }
.chest.open #lid { transform: rotate(-60deg); }
.chest.open #gold { opacity: 1; }
#gold { transition: opacity .6s; }
.chest.open { filter: drop-shadow(0 0 18px #ffd43b); }

#bubbles { position: absolute; inset: 0; pointer-events: none; }
.bubble { position: absolute; width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,.8); background: rgba(255,255,255,.25); animation: rise 1.6s ease-in forwards; }
@keyframes rise { to { transform: translateY(-170px) translateX(var(--dx, 0)); opacity: 0; } }

.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: 460px; 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; }
.settings { display: flex; flex-direction: column; gap: 8px; margin: 0 0 18px; text-align: left; }
.settings label { padding: 8px 12px; border: 2px solid #dee2e6; border-radius: 12px; }
.settings input { width: 4.2em; font-size: 1rem; padding: 2px 6px; border: 1px solid #adb5bd; border-radius: 6px; text-align: center; }
.btns { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.box button.btn-sub { background: #868e96; font-size: 1rem; padding: 8px 28px; }