:root{--ink:#4a3a34;--ink-soft:#4a3a349e;--paper:#fffaf0;--cream:#f6eedf;--cream-2:#efe2cb;--coral:#f08a5d;--coral-soft:#fbd9c8;--sky:#8fc3e8;--sky-soft:#dcecf8;--leaf:#9ccf86;--leaf-soft:#e1f1d6;--gold:#ffd45e;--pink:#f49ab0;--shadow:0 3px 0 #4a3a3429;--radius:18px;--font:"PingFang SC", "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;--safe-top:var(--safe-area-inset-top,env(safe-area-inset-top,0px));--safe-bottom:var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px));--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{background:var(--cream);height:100%;color:var(--ink);font-family:var(--font);overscroll-behavior:none;touch-action:none;-webkit-user-select:none;user-select:none;margin:0;font-size:15px;overflow:hidden}#app{position:fixed;inset:0}canvas.game{touch-action:none;width:100%;height:100%;display:block;position:absolute;inset:0}button{color:inherit;cursor:pointer;font-family:inherit}input,textarea{color:var(--ink);-webkit-user-select:text;user-select:text;font-family:inherit}.btn{border:2px solid var(--ink);background:var(--paper);min-height:44px;box-shadow:var(--shadow);white-space:nowrap;border-radius:999px;flex-shrink:0;justify-content:center;align-items:center;gap:6px;padding:0 18px;font-size:15px;font-weight:600;transition:transform 80ms,box-shadow 80ms;display:inline-flex}.btn:active{transform:translateY(2px);box-shadow:0 1px #4a3a3429}.btn.primary{background:var(--coral);color:#fff}.btn.soft{background:var(--coral-soft)}.btn.ghost{box-shadow:none;background:0 0;border-color:#0000}.btn.small{min-height:34px;padding:0 12px;font-size:13px}.btn:disabled{opacity:.5;pointer-events:none}.card{background:var(--paper);border:2px solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow)}.pill{background:var(--paper);border:2px solid var(--ink);box-shadow:var(--shadow);white-space:nowrap;border-radius:999px;align-items:center;gap:4px;padding:4px 10px;font-size:13px;font-weight:600;display:inline-flex}.muted{color:var(--ink-soft)}.onboard{padding:calc(24px + var(--safe-top)) 16px calc(24px + var(--safe-bottom));background:radial-gradient(circle at 50% 30%, #fff8ea, var(--cream) 60%, var(--cream-2));touch-action:pan-y;flex-direction:column;justify-content:flex-start;align-items:center;display:flex;position:absolute;inset:0;overflow-y:auto}.onboard>:first-child{margin-top:auto}.onboard>:last-child{margin-bottom:auto}.onboard h1{letter-spacing:4px;margin:8px 0 4px;font-size:40px}.onboard .sub{color:var(--ink-soft);text-align:center;margin:0 0 18px;line-height:1.7}.onboard .actions{flex-direction:column;gap:12px;width:min(320px,100%);display:flex}.field{border:2px solid var(--ink);background:#fff;border-radius:14px;outline:none;width:100%;min-height:46px;padding:0 14px;font-size:16px}.field:focus{border-color:var(--coral)}.kittens{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:min(460px,100%);display:grid}.kitten{text-align:center;cursor:pointer;padding:8px 8px 10px;transition:transform .12s;position:relative}.kitten.sel{background:var(--coral-soft);transform:translateY(-3px)}.kitten canvas{width:100%;height:120px;display:block}.kitten .k-name{font-size:14px;font-weight:700}.kitten .k-traits{color:var(--ink-soft);min-height:32px;margin-top:2px;font-size:12px}.names{flex-wrap:wrap;justify-content:center;gap:6px;margin:8px 0;display:flex}.names button{border:1.5px dashed var(--ink-soft);background:0 0;border-radius:999px;padding:4px 10px;font-size:13px}.hud-top{top:calc(8px + var(--safe-top));pointer-events:none;z-index:5;align-items:center;gap:8px;display:flex;position:absolute;left:8px;right:8px}.hud-top>*{pointer-events:auto}.catchip{border:2px solid var(--ink);background:var(--paper);box-shadow:var(--shadow);border-radius:999px;align-items:center;gap:8px;min-width:0;padding:4px 12px 4px 4px;display:flex}.catchip img{background:var(--cream);border:2px solid var(--ink);border-radius:50%;flex-shrink:0;width:40px;height:40px}.catchip .nm{white-space:nowrap;text-overflow:ellipsis;font-size:15px;font-weight:700;line-height:1.1;overflow:hidden}.catchip .md{color:var(--ink-soft);white-space:nowrap;font-size:12px}.spacer{flex:1}.iconbtn{border:2px solid var(--ink);background:var(--paper);width:44px;height:44px;box-shadow:var(--shadow);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;display:inline-flex;position:relative}.iconbtn:active{transform:translateY(2px)}.iconbtn .badge{background:var(--coral);color:#fff;border:2px solid var(--ink);border-radius:9px;justify-content:center;align-items:center;min-width:18px;height:18px;padding:0 4px;font-size:11px;font-weight:700;display:flex;position:absolute;top:-4px;right:-4px}.hint{top:calc(62px + var(--safe-top));z-index:4;pointer-events:none;text-overflow:ellipsis;max-width:calc(100% - 32px);position:absolute;left:50%;overflow:hidden;transform:translate(-50%)}.bar{left:0;right:0;bottom:calc(10px + var(--safe-bottom));z-index:5;pointer-events:none;justify-content:center;gap:8px;padding:0 8px;display:flex;position:absolute}.bar>*{pointer-events:auto}.dock{border:2px solid var(--ink);background:var(--paper);box-shadow:var(--shadow);scrollbar-width:none;border-radius:24px;gap:2px;max-width:100%;padding:6px;display:flex;overflow-x:auto}.dock::-webkit-scrollbar{display:none}.dock button{background:0 0;border:none;border-radius:16px;flex-direction:column;flex-shrink:0;justify-content:center;align-items:center;gap:2px;min-width:54px;height:56px;padding:0 4px;font-size:12px;font-weight:600;display:flex}.dock button.on{background:var(--coral-soft)}.dock button:active{background:var(--cream)}.speak{left:50%;bottom:calc(84px + var(--safe-bottom));z-index:6;gap:6px;width:min(420px,100% - 24px);display:flex;position:absolute;transform:translate(-50%)}.speak .field{min-height:42px;box-shadow:var(--shadow);border-radius:999px}.side{z-index:5;flex-direction:column;gap:8px;display:flex;position:absolute;top:50%;right:10px;transform:translateY(-50%)}.toasts{top:calc(100px + var(--safe-top));z-index:20;pointer-events:none;flex-direction:column;align-items:center;gap:6px;width:min(420px,100% - 24px);display:flex;position:absolute;left:50%;transform:translate(-50%)}.toast{border:2px solid var(--ink);background:var(--paper);box-shadow:var(--shadow);text-align:center;border-radius:14px;padding:8px 14px;font-size:14px;animation:.25s pop}@keyframes pop{0%{opacity:0;transform:scale(.85)translateY(-6px)}}.target{left:50%;bottom:calc(86px + var(--safe-bottom));z-index:7;align-items:center;gap:10px;width:min(360px,100% - 24px);padding:12px;animation:.2s pop;display:flex;position:absolute;transform:translate(-50%)}.target img{background:var(--cream);border:2px solid var(--ink);border-radius:14px;width:56px;height:56px}.target .info{flex:1;min-width:0}.target .tn{font-weight:700}.target .tb{flex-wrap:wrap;gap:6px;margin-top:6px;display:flex}.scrim{z-index:30;background:#4a3a3447;justify-content:center;align-items:flex-end;animation:.2s fade;display:flex;position:absolute;inset:0}@keyframes fade{0%{opacity:0}}.sheet{background:var(--paper);border:2px solid var(--ink);width:min(560px,100%);max-height:min(82vh,760px);padding-bottom:var(--safe-bottom);border-bottom:none;border-radius:24px 24px 0 0;flex-direction:column;animation:.25s cubic-bezier(.2,.9,.3,1.1) up;display:flex;box-shadow:0 -4px #4a3a341a}@media (width>=700px){.scrim{align-items:center}.sheet{border-bottom:2px solid var(--ink);border-radius:24px}}@keyframes up{0%{opacity:0;transform:translateY(40px)}}.sheet-h{align-items:center;gap:8px;padding:14px 14px 8px 18px;display:flex}.sheet-h h2{flex:1;margin:0;font-size:19px}.sheet-b{touch-action:pan-y;-webkit-overflow-scrolling:touch;padding:4px 16px 18px;overflow-y:auto}.tabs{scrollbar-width:none;flex-shrink:0;gap:6px;padding:0 16px 8px;display:flex;overflow-x:auto}.tabs button{border:2px solid var(--ink);background:var(--paper);white-space:nowrap;border-radius:999px;padding:6px 14px;font-size:14px;font-weight:600}.tabs button.on{background:var(--ink);color:var(--paper)}.grid{grid-template-columns:repeat(auto-fill,minmax(98px,1fr));gap:10px;display:grid}.item{border:2px solid var(--ink);text-align:center;background:#fff;border-radius:16px;flex-direction:column;align-items:center;gap:2px;padding:8px 6px;display:flex;position:relative}.item.on{background:var(--coral-soft)}.item.unknown{background:var(--cream);opacity:.6}.item img{width:60px;height:60px}.item .in{font-size:13px;font-weight:600;line-height:1.2}.item .ip{color:var(--ink-soft);align-items:center;gap:2px;font-size:12px;display:flex}.item .cnt{font-size:12px;font-weight:700;position:absolute;top:4px;right:6px}.list{flex-direction:column;gap:10px;display:flex}.row{border:2px solid var(--ink);background:#fff;border-radius:16px;align-items:center;gap:10px;padding:10px 12px;display:flex}.row img{flex-shrink:0;width:48px;height:48px}.row .grow{flex:1;min-width:0}.row .t1{font-weight:700}.row .t2{color:var(--ink-soft);font-size:13px;line-height:1.5}.entry{border-left:3px solid var(--coral);background:#fff;border-radius:4px 14px 14px 4px;padding:12px 14px;line-height:1.7}.entry .when{color:var(--ink-soft);font-size:12px}.stat{grid-template-columns:56px 1fr 32px;align-items:center;gap:8px;margin:6px 0;font-size:13px;display:grid}.meter{border:2px solid var(--ink);background:#fff;border-radius:6px;height:10px;overflow:hidden}.meter>i{background:var(--leaf);height:100%;display:block}.toggle{border-bottom:1.5px dashed #4a3a3433;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;display:flex}.sw{border:2px solid var(--ink);background:#fff;border-radius:999px;flex-shrink:0;width:52px;height:30px;position:relative}.sw:after{content:"";background:var(--ink);border-radius:50%;width:20px;height:20px;transition:left .15s;position:absolute;top:3px;left:3px}.sw.on{background:var(--leaf)}.sw.on:after{left:25px}.build-tray{z-index:8;background:var(--paper);border-top:2px solid var(--ink);padding:8px 0 calc(10px + var(--safe-bottom));position:absolute;bottom:0;left:0;right:0;box-shadow:0 -3px #4a3a341a}.tray-items{touch-action:pan-x;scrollbar-width:thin;gap:8px;padding:2px 12px 4px;display:flex;overflow-x:auto}.tray-items .item{min-width:84px}.tray-items .item img{width:48px;height:48px}.build-top{align-items:center;gap:8px;padding:0 12px 8px;display:flex}.stickers{grid-template-columns:repeat(5,1fr);gap:8px;display:grid}.stickers button{border:2px solid var(--ink);background:#fff;border-radius:14px;height:52px;font-size:26px}.stickers button.on{background:var(--coral-soft)}.minimap{border:2px solid var(--ink);touch-action:none;border-radius:14px;width:100%;display:block}.empty{text-align:center;color:var(--ink-soft);padding:28px 8px;line-height:1.8}.sec{margin:18px 0 8px;font-size:15px;font-weight:700}.code{letter-spacing:2px;border:2px dashed var(--ink);text-align:center;-webkit-user-select:all;user-select:all;background:#fff;border-radius:12px;padding:10px 14px;font-family:ui-monospace,Menlo,monospace;font-size:18px}.conn{bottom:calc(80px + var(--safe-bottom));z-index:4;font-size:12px;position:absolute;left:12px}@media (width<=600px){.side{top:auto;bottom:calc(84px + var(--safe-bottom));flex-direction:row;transform:none}.side .iconbtn{width:40px;height:40px}.speak,.target{bottom:calc(136px + var(--safe-bottom))}.conn{bottom:calc(86px + var(--safe-bottom))}.dock{gap:0;padding:5px 4px}.dock button{min-width:46px;height:52px;padding:0 2px;font-size:11px}}.wish{top:calc(64px + var(--safe-top));z-index:5;cursor:pointer;background:#fff8dc;max-width:calc(100% - 16px);position:absolute;left:8px}.wish .wt{text-overflow:ellipsis;overflow:hidden}.hint{top:calc(100px + var(--safe-top))}.toasts{top:auto;bottom:calc(150px + var(--safe-bottom))}.catchip{flex-shrink:0;max-width:48%}@media (width<=420px){.wx .wx-t{display:none}.hud-top{gap:6px}}.goodnight{color:#fff6d8;pointer-events:none;z-index:25;text-shadow:0 2px #14143266;background:radial-gradient(circle at 50% 45%,#1e225026,#14183c8c);flex-direction:column;justify-content:center;align-items:center;gap:8px;animation:4.2s forwards gn;display:flex;position:absolute;inset:0}.goodnight .gn-t{letter-spacing:2px;font-size:28px;font-weight:700}.goodnight .gn-s{opacity:.85;font-size:15px}@keyframes gn{0%{opacity:0}20%,75%{opacity:1}to{opacity:0}}.scrim.dialog-scrim{z-index:60;align-items:center;padding:16px}.dialog{background:var(--paper);border:2px solid var(--ink);border-radius:20px;width:min(360px,100%);padding:18px 18px 14px;animation:.2s cubic-bezier(.2,.9,.3,1.2) dialog-pop;box-shadow:0 4px #4a3a341f}.dialog p{white-space:pre-line;margin:0 0 14px;line-height:1.7}.dialog .field{margin-bottom:14px}.dialog-actions{justify-content:flex-end;gap:10px;display:flex}.dialog-actions .btn{flex:1}.btn.danger{color:#fff;background:#e07a5f}.btn.danger:disabled{opacity:.45}@keyframes dialog-pop{0%{opacity:0;transform:scale(.92)}}