:root{--ui-bg: rgba(255, 255, 255, .9);--ui-fg: #3b2f2a;--muted: #8a7d75;--accent: #ff8a65;--accent-dark: #e8663f;--up: #e53935;--down: #14a052;--shadow: 0 4px 14px rgba(0, 0, 0, .18);--safe-t: env(safe-area-inset-top, 0px);--safe-b: env(safe-area-inset-bottom, 0px);--chat-h: 48px;--bottom: calc(10px + var(--safe-b) + var(--kb, 0px))}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#8fd3ff;color:var(--ui-fg);font-family:PingFang TC,Noto Sans TC,Microsoft JhengHei,system-ui,sans-serif;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;touch-action:manipulation}button,input,select{font:inherit;color:inherit}button{cursor:pointer}.stage{position:fixed;top:0;left:0;width:100vw;height:var(--app-h, 100vh);touch-action:none}.muted{color:var(--muted)}.up{color:var(--up)}.down{color:var(--down)}.hud-top{position:fixed;top:calc(8px + var(--safe-t));left:8px;right:8px;display:flex;justify-content:space-between;align-items:flex-start;gap:8px;pointer-events:none;z-index:40}.hud-top>*{pointer-events:auto}.hud-right{display:flex;gap:6px;align-items:flex-start}.chip{background:var(--ui-bg);border:none;border-radius:16px;padding:7px 12px;box-shadow:var(--shadow);font-size:14px;white-space:nowrap}.profile{position:relative;min-width:0}.profile .chip{display:flex;align-items:center;gap:6px}.badge{background:#ffe2d6;color:#b4472a;border-radius:999px;padding:1px 8px;font-size:12px}.caret{color:var(--muted);font-size:11px}.popover{position:absolute;top:calc(100% + 6px);left:0;width:220px;max-height:60vh;overflow:auto;background:#fff;border-radius:14px;box-shadow:var(--shadow);padding:6px;display:flex;flex-direction:column}.popover-head{font-size:12px;color:var(--muted);padding:6px 8px}.opt{text-align:left;border:none;background:none;padding:9px 10px;border-radius:10px;font-size:15px}.opt.on,.opt:hover{background:#fff1ea}.ticker{display:flex;flex-direction:column;gap:2px;padding:6px 12px}.ticker-row{display:flex;gap:6px;align-items:baseline;font-variant-numeric:tabular-nums}.ticker-sub{font-size:11px;color:var(--muted)}@media (max-width: 520px){.hud-top{flex-direction:column;align-items:stretch}.hud-right{justify-content:space-between}.ticker{flex:1}.ticker-row{font-size:13px}}.joystick{position:fixed;left:18px;bottom:calc(var(--bottom) + var(--chat-h) + 14px);width:120px;height:120px;border-radius:50%;background:#ffffff47;border:2px solid rgba(255,255,255,.7);box-shadow:var(--shadow);touch-action:none;z-index:35;display:grid;place-items:center}.knob{width:54px;height:54px;border-radius:50%;background:#ffffffeb;box-shadow:0 2px 8px #00000040;pointer-events:none}.kbd-hint{display:none}@media (hover: hover) and (pointer: fine){.joystick{display:none}.kbd-hint{display:block;position:fixed;left:12px;bottom:calc(var(--bottom) + var(--chat-h) + 12px);font-size:12px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5);z-index:35}}.actions{position:fixed;right:12px;bottom:calc(var(--bottom) + var(--chat-h) + 14px);display:flex;flex-direction:column;align-items:flex-end;gap:10px;z-index:35}.ctx{border:none;background:var(--accent);color:#fff;font-weight:700;font-size:16px;padding:12px 18px;border-radius:999px;box-shadow:var(--shadow);animation:pop .25s ease-out}.ctx:active{background:var(--accent-dark)}.emotes{display:grid;grid-template-columns:repeat(2,60px);gap:8px}.emote{width:60px;height:60px;border-radius:18px;border:none;background:var(--ui-bg);box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:0}.emote span{font-size:24px;line-height:1}.emote small{font-size:11px;white-space:nowrap}.emote:active{transform:scale(.94)}.chatbar{position:fixed;left:8px;right:8px;bottom:var(--bottom);height:var(--chat-h);display:flex;gap:6px;z-index:45}.chatbar form{flex:1;display:flex;gap:6px;min-width:0}.chatbar input{flex:1;min-width:0;border:none;border-radius:999px;padding:0 16px;background:var(--ui-bg);box-shadow:var(--shadow);font-size:16px;-webkit-user-select:text;user-select:text;outline:none}.chat-btn,.send{border:none;border-radius:999px;box-shadow:var(--shadow);background:var(--ui-bg);padding:0 14px;font-size:18px}.send{background:var(--accent);color:#fff;font-size:15px;font-weight:700}.phrases{position:absolute;left:0;bottom:calc(100% + 8px);max-width:420px;display:flex;flex-wrap:wrap;gap:6px;background:#fffffff2;border-radius:16px;box-shadow:var(--shadow);padding:10px}.phrase{border:1px solid #f0d9cf;background:#fff8f4;border-radius:999px;padding:7px 12px;font-size:14px}.avatar-ui{position:absolute;left:0;bottom:0;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:3px;pointer-events:none;white-space:nowrap}.name{font-size:11px;background:#0000006b;color:#fff;padding:1px 7px;border-radius:999px;display:flex;gap:4px;align-items:center}.name.self{background:#ff8a65eb}.name .title{color:#ffd9a8}.name.self .title{color:#fff3c4}.emoji{font-size:26px;line-height:1}.emoji:empty{display:none}.bubble{position:relative;width:max-content;max-width:180px;white-space:normal;text-align:center;background:#fff;color:var(--ui-fg);font-size:13px;padding:6px 10px;border-radius:14px;box-shadow:0 2px 8px #0003;animation:bubble 6s ease-out forwards}.bubble:after{content:"";position:absolute;left:50%;bottom:-5px;width:10px;height:10px;background:#fff;transform:translate(-50%) rotate(45deg)}.world-label{font-size:11px;background:#ffffffd9;padding:1px 7px;border-radius:999px;white-space:nowrap}.toast{position:fixed;top:calc(70px + var(--safe-t));left:50%;transform:translate(-50%);max-width:calc(100vw - 32px);background:#281e19d9;color:#fff;padding:10px 16px;border-radius:999px;font-size:14px;text-align:center;z-index:50;pointer-events:none;animation:toast 3.8s ease forwards}@media (max-width: 520px){.toast{top:calc(118px + var(--safe-t))}}.modal{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000059;display:grid;place-items:center;z-index:60}.fortune{width:min(280px,calc(100vw - 48px));background:#fffaf0;border:3px solid #c0392b;border-radius:12px;padding:22px 18px 16px;text-align:center;box-shadow:var(--shadow);animation:pop .3s ease-out}.fortune-no{color:#c0392b;font-weight:700;font-size:15px}.fortune-rank{font-size:30px;font-weight:800;margin:6px 0 10px}.fortune-text{font-size:20px;letter-spacing:2px}.fortune-note{font-size:11px;color:var(--muted);margin:14px 0 12px}.fortune-btn{border:none;background:#c0392b;color:#fff;border-radius:999px;padding:8px 28px;font-weight:700}.debug{position:fixed;left:8px;top:calc(110px + var(--safe-t));width:210px;background:#fffffff0;border-radius:12px;box-shadow:var(--shadow);padding:10px;font-size:12px;display:flex;flex-direction:column;gap:6px;z-index:55}.debug input[type=range]{width:100%}.debug .row{display:flex;gap:4px}.debug button,.debug select{font-size:12px;padding:4px 6px;border-radius:6px;border:1px solid #ddd;background:#fff}.debug .row button{flex:1}@media (max-width: 520px){.debug{top:calc(118px + var(--safe-t));width:180px}}@keyframes bubble{0%{opacity:0;transform:translateY(6px) scale(.9)}6%{opacity:1;transform:none}85%{opacity:1}to{opacity:0}}@keyframes toast{0%{opacity:0;transform:translate(-50%,-8px)}8%,85%{opacity:1;transform:translate(-50%)}to{opacity:0}}@keyframes pop{0%{transform:scale(.85);opacity:0}to{transform:none;opacity:1}}.zone-picker{width:min(300px,calc(100vw - 32px));background:#fffaf0;border-radius:14px;padding:18px 16px 14px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:8px;animation:pop .3s ease-out}.zone-head{font-size:18px;font-weight:800;text-align:center;margin-bottom:4px}.zone-btn{border:none;border-radius:999px;padding:10px;color:#fff;font-size:16px;font-weight:700}.zone-btn.other{background:#eee6da;color:#5a3b1e;font-size:14px}