html[data-theme=light]{--text-1: #1f2a37;--text-2: #56606d;--text-3: #ffffff;--text-4: #2f7d32;--text-5: #c2410c;--text-6: #1f2a37;--bg-1: #bfe6ff;--bg-2: rgba(255, 255, 255, .88);--bg-3: #ff8a3d;--bg-4: #3fa4f0;--bg-5: rgba(255, 255, 255, .35);--bg-6: rgba(20, 30, 40, .45)}html[data-theme=dark]{--text-1: #e8eef5;--text-2: #9aa7b6;--text-3: #ffffff;--text-4: #7ddc82;--text-5: #ffab70;--text-6: #f5f7fa;--bg-1: #1a2238;--bg-2: rgba(28, 35, 52, .9);--bg-3: #e0662a;--bg-4: #2a78bf;--bg-5: rgba(255, 255, 255, .18);--bg-6: rgba(0, 0, 0, .55)}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:var(--bg-1);color:var(--text-1);font-family:system-ui,-apple-system,PingFang SC,Microsoft YaHei,sans-serif;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}#app{position:fixed;top:0;right:0;bottom:0;left:0}canvas#scene{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;touch-action:none;display:block}button{font:inherit;border:none;cursor:pointer;touch-action:manipulation}.hud{position:absolute;pointer-events:none}.hud-tl{top:calc(10px + env(safe-area-inset-top));left:calc(10px + env(safe-area-inset-left));background:var(--bg-2);color:var(--text-1);padding:8px 12px;border-radius:12px;font-size:14px;line-height:1.5;max-width:60vw}.hud-tl .me{color:var(--text-4);font-weight:700}.hud-tl .sub{color:var(--text-2);font-size:12px}.hud-tr{top:calc(10px + env(safe-area-inset-top));right:calc(10px + env(safe-area-inset-right));display:flex;gap:6px;pointer-events:auto;flex-wrap:wrap;justify-content:flex-end}.pill{min-height:44px;min-width:44px;padding:0 12px;border-radius:22px;background:var(--bg-2);color:var(--text-1);font-size:14px}.hint{bottom:calc(12px + env(safe-area-inset-bottom));left:50%;transform:translate(-50%);background:var(--bg-2);color:var(--text-2);font-size:12px;padding:6px 12px;border-radius:10px;white-space:nowrap}body.touch .hint{display:none}.actions{position:absolute;right:calc(16px + env(safe-area-inset-right));bottom:calc(20px + env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(2,auto);gap:12px;align-items:end}.act{width:72px;height:72px;border-radius:50%;background:var(--bg-3);color:var(--text-3);font-size:15px;font-weight:700;box-shadow:0 3px 10px var(--bg-6);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;line-height:1.1;padding:4px}.act.sec{background:var(--bg-4)}.act:active{transform:scale(.94)}.act .cd{display:block;font-size:11px;font-weight:400}.act.jump{display:none}body.touch .act.jump{display:flex}.joy-base{position:absolute;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;background:var(--bg-5);pointer-events:none;display:none}.joy-knob{position:absolute;left:35px;top:35px;width:50px;height:50px;border-radius:50%;background:var(--bg-2)}.labels{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden}.label{position:absolute;transform:translate(-50%,-100%);white-space:nowrap;font-size:12px;color:var(--text-6);background:var(--bg-5);padding:1px 6px;border-radius:8px}.label.me{color:var(--text-4);font-weight:700}.label.target{color:var(--text-5);font-weight:700}.bubble{position:absolute;transform:translate(-50%,-100%);max-width:220px;white-space:normal;font-size:13px;color:var(--text-1);background:var(--bg-2);padding:6px 10px;border-radius:12px}.toasts{position:absolute;top:calc(70px + env(safe-area-inset-top));left:50%;transform:translate(-50%);display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none}.toast{background:var(--bg-2);color:var(--text-1);padding:6px 14px;border-radius:14px;font-size:14px}.modal-mask{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--bg-6);display:none;align-items:center;justify-content:center;padding:12px}.modal-mask.open{display:flex}.modal{width:min(460px,100%);max-height:85vh;display:flex;flex-direction:column;background:var(--bg-2);color:var(--text-1);border-radius:16px;overflow:hidden}.modal-head{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;padding:8px 8px 8px 16px;font-weight:700}.modal-close{width:44px;height:44px;border-radius:50%;background:var(--bg-5);color:var(--text-1);font-size:18px}.modal-body{overflow-y:auto;padding:8px 16px;flex:1;min-height:120px;-webkit-user-select:text;user-select:text}.modal-foot{position:sticky;bottom:0;display:flex;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom))}.modal-foot input{flex:1;min-height:44px;border-radius:22px;border:none;padding:0 14px;font-size:16px;background:var(--bg-5);color:var(--text-1)}.modal-foot button{min-height:44px;padding:0 18px;border-radius:22px;background:var(--bg-3);color:var(--text-3);font-weight:700}.msg{margin:6px 0;font-size:14px}.msg .who{color:var(--text-2);font-size:12px}.msg.mine .who{color:var(--text-4)}.loading{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:var(--bg-1);color:var(--text-1);font-size:18px}.loading.hide{display:none}@media(max-width:520px){.hud-tl{font-size:12px;max-width:46vw;padding:6px 8px}.hud-tl .sub{font-size:11px}.hud-tr{max-width:50vw}.pill{font-size:12px;padding:0 8px}}.activity{top:calc(12px + env(safe-area-inset-top));left:50%;transform:translate(-50%);background:var(--bg-3);color:var(--text-3);font-weight:700;font-size:14px;padding:8px 16px;border-radius:18px;white-space:nowrap;display:none}@media(max-width:520px){.activity{top:auto;bottom:calc(210px + env(safe-area-inset-bottom));font-size:13px}}.coins{position:absolute;top:calc(62px + env(safe-area-inset-top));right:calc(10px + env(safe-area-inset-right));min-height:36px;display:flex;align-items:center;padding:0 14px;border-radius:18px;background:var(--bg-2);color:var(--text-5);font-weight:700;font-size:14px;pointer-events:none}.itembar{position:absolute;right:calc(16px + env(safe-area-inset-right));bottom:calc(190px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:flex-end;gap:8px;max-height:45vh;overflow-y:auto;pointer-events:auto}.itembtn{min-height:44px;padding:0 16px;border-radius:22px;background:var(--bg-4);color:var(--text-3);font-weight:700;font-size:14px}.itembtn.on{background:var(--bg-3)}.shop-coins{font-weight:700;color:var(--text-5);margin:4px 0}.shop-hint{color:var(--text-2);font-size:14px}.shop-msg{font-weight:700}.shop-msg.ok{color:var(--text-4)}.shop-msg.bad{color:var(--text-5)}.modal-foot .shop-back{background:var(--bg-4)}.act.view{width:56px;height:56px;font-size:13px;justify-self:end}
