:root{--bg:#fff8f4;--ink:#4a3431;--soft:#f3e3dc;--accent:#ff8fa3;--card:#ffffffcc}
@media (prefers-color-scheme:dark){:root{--bg:#231c1f;--ink:#f5e6e0;--soft:#3a2f33;--card:#2d2428cc}}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:system-ui,"PingFang TC","Noto Sans TC",sans-serif;overscroll-behavior:none}
body{display:flex;flex-direction:column;min-height:100dvh}
header{display:flex;justify-content:space-between;align-items:center;padding:14px 18px}
.brand{font-weight:800;font-size:20px;letter-spacing:.06em}
main{flex:1;position:relative;display:flex}
#stage{flex:1;position:relative;outline:none;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
#stage.squeezing{cursor:grabbing}
#world{position:absolute;inset:0;width:100%;height:100%;display:block}
#bubble{position:absolute;left:50%;top:14%;transform:translate(-50%,8px) scale(.9);background:var(--card);padding:8px 14px;border-radius:16px;font-weight:700;opacity:0;transition:.18s;pointer-events:none;box-shadow:0 4px 16px #0001}
#bubble.visible{opacity:1;transform:translate(-50%,0) scale(1)}
#loading{position:absolute;inset:0;display:grid;place-items:center;opacity:.6}
#hand-cursor{position:absolute;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;border:2px solid #9ccf6e;background:#b8d99530;pointer-events:none;transition:width .1s,height .1s,margin .1s}
#hand-cursor.grip{width:22px;height:22px;margin:-11px 0 0 -11px;background:#a8cb79aa}
#camera-panel{position:absolute;right:14px;top:6px;width:min(220px,40vw);aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:#000;box-shadow:0 6px 24px #0003}
#camera-panel video,#camera-panel canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
#camera-status{position:absolute;left:8px;bottom:6px;color:#fff;font-size:12px;text-shadow:0 1px 3px #000}
#close-camera{position:absolute;right:6px;top:4px;border:0;background:#0006;color:#fff;border-radius:50%;width:26px;height:26px;cursor:pointer}
footer{padding:10px 16px calc(14px + env(safe-area-inset-bottom));text-align:center}
.controls{display:inline-flex;align-items:center;gap:10px;background:var(--card);padding:8px 10px;border-radius:999px;box-shadow:0 4px 18px #0000000f;flex-wrap:wrap;justify-content:center}
.characters{display:flex;gap:6px}
.character{width:46px;height:46px;border-radius:50%;border:2px solid transparent;background:var(--soft);padding:2px;cursor:pointer}
.character.active{border-color:var(--accent)}
.character img{width:100%;height:100%}
.divider{width:1px;height:28px;background:var(--soft)}
.pill{border:0;background:var(--soft);color:var(--ink);padding:10px 14px;border-radius:999px;font:inherit;font-weight:600;cursor:pointer}
.pill.icon{width:42px;padding:10px 0;font-size:18px}
.pill:disabled{opacity:.5}
#hint{font-size:12px;opacity:.6;margin:10px 0 0}
[hidden]{display:none!important}