:root{--ink:#2b2a4a;--muted:#6d6890;--panel:#ffffffe6;--accent:#ff4f9a;--shadow:0 8px 24px #3c286e2e;color:var(--ink);font-family:Be Vietnam Pro,Segoe UI,system-ui,-apple-system,BlinkMacSystemFont,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif}*{box-sizing:border-box}html,body{-webkit-user-select:none;user-select:none;background:#f3ecff;height:100%;margin:0;overflow:hidden}#app{position:fixed;top:0;bottom:0;left:0;right:0}#app canvas{outline:none;display:block}#hud{pointer-events:none;position:fixed;top:0;bottom:0;left:0;right:0}#hud>*{pointer-events:auto}.hud-top{top:max(12px, env(safe-area-inset-top));flex-direction:column;gap:8px;width:min(340px,100vw - 24px);display:flex;position:absolute;left:12px}.brand{background:var(--panel);box-shadow:var(--shadow);border-radius:999px;align-self:flex-start;align-items:center;gap:8px;padding:8px 14px;font-size:14px;display:inline-flex}.brand b{font-weight:800}.brand span:last-child{color:var(--muted)}.brand .dot{background:conic-gradient(#ff8fd1,#ffe666,#9ed7ff,#b58cff,#ff8fd1);border-radius:50%;width:10px;height:10px}.search{position:relative}.search input{background:var(--panel);width:100%;box-shadow:var(--shadow);font:inherit;color:var(--ink);-webkit-user-select:text;user-select:text;border:2px solid #0000;border-radius:14px;outline:none;padding:11px 14px;font-size:14px}.search input:focus{border-color:#c9b4ff}.results{background:var(--panel);box-shadow:var(--shadow);border-radius:14px;margin:6px 0 0;padding:0;list-style:none;overflow:hidden}.results:empty{display:none}.results li{cursor:pointer;align-items:center;gap:10px;padding:9px 12px;font-size:14px;display:flex}.results li:hover{background:#f4eeff}.results .name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.chip{text-align:center;min-width:40px;color:var(--ink);border-radius:8px;flex:none;padding:3px 8px;font-size:12px;font-weight:800}.chip.big{border-radius:10px;padding:6px 12px;font-size:16px}.hud-side{top:max(12px, env(safe-area-inset-top));flex-direction:column;align-items:flex-end;gap:8px;display:flex;position:absolute;right:12px}.minimap{box-shadow:var(--shadow);cursor:crosshair;border:3px solid #fff;border-radius:14px;display:block}.buttons{flex-wrap:wrap;justify-content:flex-end;gap:6px;max-width:calc(100vw - 24px);display:flex}.buttons button{background:var(--panel);box-shadow:var(--shadow);font:inherit;color:var(--ink);cursor:pointer;border:0;border-radius:999px;padding:8px 12px;font-size:13px;font-weight:700}.buttons button:hover{background:#fff}.buttons button.icon{padding:8px 11px;font-size:15px;line-height:1}.settings{background:var(--panel);width:250px;box-shadow:var(--shadow);border-radius:14px;padding:12px}.settings[hidden]{display:none}.settings-row{margin-bottom:10px}.seg{gap:4px;margin-top:4px;display:flex}.seg button{font:inherit;color:var(--ink);white-space:nowrap;cursor:pointer;background:#f1ebff;border:0;border-radius:10px;flex:1;padding:7px 4px;font-size:12px;font-weight:700}.seg button.active,.buttons button.active{background:var(--accent);color:#fff}.card{left:50%;bottom:max(20px, env(safe-area-inset-bottom));background:var(--panel);width:min(420px,100vw - 24px);box-shadow:var(--shadow);opacity:0;pointer-events:none;border-radius:18px;padding:14px 16px;transition:opacity .2s,transform .2s;position:absolute;transform:translate(-50%,20px)}.card.show{opacity:1;pointer-events:auto;transform:translate(-50%)}.card-head{align-items:center;gap:12px;display:flex}.card-title{font-size:17px;font-weight:800;line-height:1.25}.card-sub{color:var(--muted);font-size:12px}.groups{flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px;display:flex}.groups .card-sub{width:100%}.tag{background:#fff;background:color-mix(in srgb, var(--c) 30%, white);border:2px solid var(--c);border-radius:999px;padding:3px 10px;font-size:12px;font-weight:700}.help{left:12px;bottom:max(12px, env(safe-area-inset-bottom));background:var(--panel);box-shadow:var(--shadow);color:var(--muted);border-radius:14px;padding:10px 14px;font-size:12px;line-height:1.6;position:absolute}.help b{color:var(--ink)}.joystick{left:24px;bottom:max(28px, env(safe-area-inset-bottom));width:120px;height:120px;box-shadow:var(--shadow);touch-action:none;background:#ffffff8c;border:3px solid #ffffffe6;border-radius:50%;display:none;position:absolute}.joystick .knob{background:var(--accent);border-radius:50%;width:52px;height:52px;margin:-26px 0 0 -26px;position:absolute;top:50%;left:50%;box-shadow:0 4px 12px #ff4f9a73}@media (pointer:coarse){.joystick{display:block}.help{display:none}.card{bottom:170px}.buttons button{padding:7px 10px;font-size:12px}}@media (max-width:640px){.minimap{width:150px!important;height:auto!important}.brand span:last-child{display:none}.hud-top{width:calc(100vw - 190px)}}.start{padding:16px 16px max(28px, env(safe-area-inset-bottom));z-index:10;background:linear-gradient(#f3ecff00 40%,#f3ecffd9);justify-content:center;align-items:flex-end;transition:opacity .5s;display:flex;position:fixed;top:0;bottom:0;left:0;right:0}.start.hide{opacity:0;pointer-events:none}.start-card{width:min(420px,100%);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);text-align:center;background:#ffffffeb;border-radius:22px;padding:20px 20px 16px}.start-brand{color:var(--muted);align-items:center;gap:8px;font-size:13px;font-weight:700;display:inline-flex}.start-brand .dot{background:conic-gradient(#ff8fd1,#ffe666,#9ed7ff,#b58cff,#ff8fd1);border-radius:50%;width:10px;height:10px}.start h1{margin:6px 0 4px;font-size:24px;font-weight:800}.start p{color:var(--muted);margin:0 0 14px;font-size:14px}.gender{justify-content:center;gap:10px;margin-bottom:14px;display:flex}.gender button{max-width:150px;font:inherit;color:var(--ink);cursor:pointer;background:#f4eeff;border:3px solid #0000;border-radius:16px;flex-direction:column;flex:1;align-items:center;gap:4px;padding:10px 8px 8px;font-weight:800;display:flex}.gender button svg{width:64px;height:64px}.gender button[aria-pressed=true]{border-color:var(--accent);background:#fff0f7}.gender button:disabled{cursor:default}#start-btn{background:var(--accent);width:100%;font:inherit;color:#fff;cursor:pointer;border:0;border-radius:14px;padding:13px 16px;font-size:16px;font-weight:800;box-shadow:0 6px 16px #ff4f9a59}#start-btn:disabled{box-shadow:none;cursor:default;background:#c9b8e8}.start.error #start-btn{background:#e25b5b}.progress{visibility:hidden;background:#eee6ff;border-radius:999px;height:6px;margin-top:10px;overflow:hidden}.start.loading .progress{visibility:visible}.progress>div{background:var(--accent);width:0;height:100%;transition:width .25s}.start-error{color:#b33b3b;margin:12px 0 0;font-size:13px;line-height:1.5}.notice{z-index:20;background:#f3ecffd9;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;top:0;bottom:0;left:0;right:0}.notice[hidden]{display:none}.notice-card{width:min(360px,100%);box-shadow:var(--shadow);text-align:center;background:#fff;border-radius:18px;padding:18px 20px}.notice-card p{color:var(--muted);font-size:14px}.notice-card button{background:var(--accent);font:inherit;color:#fff;cursor:pointer;border:0;border-radius:12px;padding:10px 22px;font-weight:800}button{touch-action:manipulation}