:root{--bg:#fbf6ec;--bg-2:#fff;--bg-3:#f4ecdd;--elev:#ede3d0;--line:#eee3cf;--line-2:#ddcfb3;--text:#463c2f;--text-dim:#8d8069;--text-faint:#b5a88e;--accent:#23b675;--accent-dark:#178f5b;--accent-ink:#fff;--accent-soft:#e2f5ea;--accent-2:#4c9df5;--coral:#ff7a63;--coral-soft:#ffe8e0;--sun:#ffc44d;--sun-soft:#fff3d4;--sky-soft:#e6f1fd;--danger:#e35d75;--warn:#c98a12;--shadow-1:0 2px 10px #78643c1a;--shadow-2:0 14px 36px #78643c29;--radius:14px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;-webkit-font-smoothing:antialiased;font-family:"M PLUS Rounded 1c",Hiragino Maru Gothic ProN,Hiragino Sans,Noto Sans JP,system-ui,sans-serif;font-weight:500}*{box-sizing:border-box}html,body,#root{background:var(--bg);height:100%;color:var(--text);margin:0}a{color:var(--accent-dark)}h1,h2,h3{margin:0}::selection{background:#23b67540}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:var(--line-2);background-clip:padding-box;border:3px solid #0000;border-radius:999px}::-webkit-scrollbar-track{background:0 0}button,input,select{font:inherit;border:1.5px solid var(--line-2);background:var(--bg-2);color:var(--text);border-radius:12px;padding:8px 14px;transition:border-color .15s,background .15s,color .15s,transform .1s,box-shadow .15s,opacity .15s}input::placeholder{color:var(--text-faint)}input:focus-visible,select:focus-visible{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px #23b67526}button{cursor:pointer;white-space:nowrap;box-shadow:0 2px 0 var(--line);justify-content:center;align-items:center;gap:7px;font-weight:700;display:inline-flex}button:hover:not(:disabled){border-color:var(--line-2);background:#fffbf2}button:active:not(:disabled){box-shadow:0 1px 0 var(--line);transform:translateY(1px)}button:focus-visible{outline:none;box-shadow:0 0 0 3px #23b67555}button:disabled{opacity:.45;cursor:default}button.primary{background:var(--accent);color:var(--accent-ink);box-shadow:0 3px 0 var(--accent-dark);border-color:#0000;font-weight:800}button.primary:hover:not(:disabled){background:#2cc884;border-color:#0000}button.primary:active:not(:disabled){box-shadow:0 1px 0 var(--accent-dark);transform:translateY(2px)}button.ghost{color:var(--text-dim);box-shadow:none;background:0 0;border-color:#0000}button.ghost:hover:not(:disabled){background:var(--bg-3);color:var(--text)}button.icon-btn{border-radius:12px;padding:8px}.topbar{background:color-mix(in srgb, var(--bg) 90%, transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1.5px solid var(--line);z-index:20;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:10px 18px;display:flex;position:relative}.brand{color:var(--text);align-items:center;gap:9px;text-decoration:none;display:inline-flex}.brand h1{letter-spacing:.02em;font-size:18px;font-weight:800}.topbar-left,.topbar-right{flex-wrap:wrap;align-items:center;gap:8px;min-width:0;display:flex}.room-title{text-overflow:ellipsis;white-space:nowrap;max-width:32vw;font-size:15px;font-weight:800;overflow:hidden}.room-type-chip{color:var(--text-dim);border:1.5px solid var(--line);background:var(--bg-2);white-space:nowrap;border-radius:999px;padding:3px 10px;font-size:11px}.avatar-chip{border-radius:999px;align-items:center;gap:8px;padding:5px 14px 5px 6px;display:inline-flex}.avatar-chip .thumb{background:var(--bg-3);border-radius:50%;justify-content:center;align-items:center;width:26px;height:26px;display:inline-flex;overflow:hidden}.avatar-chip img{object-fit:contain;image-rendering:auto;width:24px;height:24px}.lobby{background:radial-gradient(ellipse 640px 320px at 85% -60px, #ffc44d2b, transparent), radial-gradient(ellipse 560px 300px at 10% -40px, #ff7a6322, transparent), radial-gradient(ellipse 700px 420px at 50% 105%, #23b6751a, transparent), radial-gradient(#7a643c14 1.5px, transparent 1.5px), var(--bg);background-size:auto,auto,auto,26px 26px,auto;flex-direction:column;min-height:100%;display:flex}.demo-banner{background:var(--sun-soft);color:#8f6c1d;text-align:center;border-bottom:1.5px solid #f2e3b4;padding:7px 18px;font-size:12px}.demo-banner strong{color:#b3541e;font-weight:700}.lobby-main{width:100%;max-width:1120px;margin:0 auto;padding:28px 28px 64px}.hero{text-align:center;flex-direction:column;align-items:center;gap:18px;padding:48px 16px 40px;display:flex}.hero-title{letter-spacing:.02em;font-size:clamp(30px,5vw,46px);font-weight:800;line-height:1.3}.hero-title .marker{background:linear-gradient(#0000 58%,#ffd88a 58% 92%,#0000 92%);padding:0 3px}.hero-sub{color:var(--text-dim);max-width:560px;margin:0;font-size:15px;line-height:2}.hero-stage{padding-top:44px;position:relative}.hero-pets{gap:20px;display:flex}.hero-pets img{object-fit:contain;image-rendering:auto;filter:drop-shadow(0 6px 5px #78643c38);width:68px;height:68px;animation:2.6s ease-in-out infinite pet-bob}.hero-pets img:nth-child(2){animation-delay:.4s}.hero-pets img:nth-child(3){animation-delay:.8s}.hero-pets img:nth-child(4){animation-delay:1.2s}.hero-pets img:nth-child(5){animation-delay:1.6s}@keyframes pet-bob{0%,to{transform:translateY(0)}50%{transform:translateY(-7px)}}.hero-bubble{background:var(--bg-2);border:2px solid var(--text);border-radius:999px;padding:5px 14px;font-size:13px;font-weight:700;animation:3.2s ease-in-out infinite bubble-float;position:absolute;top:0;box-shadow:0 3px #463c2f26}.hero-bubble:after{content:"";background:var(--bg-2);border-right:2px solid var(--text);border-bottom:2px solid var(--text);width:10px;height:10px;position:absolute;bottom:-7px;left:22px;transform:rotate(45deg)skew(8deg,8deg)}.hero-bubble.b1{left:calc(50% - 190px);transform:rotate(-4deg)}.hero-bubble.b2{animation-delay:1.4s;left:calc(50% + 78px);transform:rotate(3deg)}.hero-bubble.b2:after{left:auto;right:22px}@keyframes bubble-float{0%,to{translate:0}50%{translate:0 -5px}}.login-card{background:var(--bg-2);border:2px solid var(--line-2);width:min(420px,100%);box-shadow:0 6px 0 var(--line), var(--shadow-1);border-radius:22px;flex-direction:column;gap:12px;margin-top:10px;padding:22px 24px;display:flex}.login-card .login-label{color:var(--text-dim);text-align:left;font-size:13px;font-weight:700}.login-card form{gap:8px;display:flex}.login-card input{background:var(--bg);flex:1;min-width:0;padding:11px 14px}.login-card button.primary{border-radius:999px;padding:11px 22px}.feature-row{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;width:100%;max-width:880px;margin:38px auto 0;display:grid}.feature-card{text-align:left;border:2px solid;border-radius:20px;padding:20px 18px;transition:transform .2s}.feature-card.f-mint{background:var(--accent-soft);border-color:#bfe6cf;transform:rotate(-1.2deg)}.feature-card.f-lemon{background:var(--sun-soft);border-color:#f0dfa8;transform:rotate(.9deg)}.feature-card.f-sky{background:var(--sky-soft);border-color:#c9def5;transform:rotate(-.7deg)}.feature-card:hover{transform:rotate(0)translateY(-4px)}.feature-card .f-emoji{background:var(--bg-2);border-radius:50%;justify-content:center;align-items:center;width:42px;height:42px;font-size:20px;display:inline-flex;box-shadow:0 2px #78643c1f}.feature-card h3{margin:12px 0 6px;font-size:14.5px;font-weight:800}.feature-card p{color:var(--text-dim);margin:0;font-size:12.5px;line-height:1.9}.lobby-head{justify-content:space-between;align-items:baseline;gap:12px;margin:26px 0 4px;display:flex}.lobby-head h2{font-size:20px;font-weight:800}.lobby-head .count{color:var(--text-faint);margin-left:8px;font-size:13px;font-weight:500}.hint{color:var(--text-dim);font-size:13px;line-height:1.8}.room-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin-top:16px;display:grid}.room-card{background:var(--bg-2);border:2px solid var(--line);color:var(--text);box-shadow:0 3px 0 var(--line);border-radius:18px;flex-direction:column;text-decoration:none;transition:border-color .18s,transform .18s,box-shadow .18s;display:flex;overflow:hidden}.room-card:hover{border-color:var(--accent);box-shadow:0 7px 0 #bfe6cf, var(--shadow-1);transform:translateY(-4px)rotate(-.4deg)}.room-card-thumb{background:var(--bg-3);height:108px;position:relative;overflow:hidden}.room-card-thumb img{object-fit:cover;width:100%;height:100%}.room-card-thumb .thumb-fallback{background-image:linear-gradient(45deg,#7a643c0d 25%,#0000 25% 75%,#7a643c0d 75%),linear-gradient(45deg,#7a643c0d 25%,#0000 25% 75%,#7a643c0d 75%);background-position:0 0,14px 14px;background-size:28px 28px;justify-content:center;align-items:center;font-size:30px;display:flex;position:absolute;inset:0}.room-card-thumb .badge{letter-spacing:.04em;color:var(--coral);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#ffffffe8;border-radius:999px;padding:3px 10px;font-size:10.5px;font-weight:800;position:absolute;top:8px;left:8px;box-shadow:0 1px 4px #78643c33}.room-card-thumb .badge.plaza{color:var(--accent-2)}.room-card-thumb .badge.garden{color:var(--accent-dark)}.room-card-body{flex-direction:column;flex:1;gap:5px;padding:13px 15px 14px;display:flex}.room-card-body h3{font-size:15px;font-weight:800}.room-card-body p{color:var(--text-dim);text-overflow:ellipsis;white-space:nowrap;margin:0;font-size:12.5px;overflow:hidden}.room-card-meta{color:var(--text-faint);align-items:center;gap:5px;margin-top:auto;padding-top:8px;font-size:11.5px;display:flex}.room-card.create{border-style:dashed;border-color:var(--line-2);min-height:208px;color:var(--text-dim);cursor:pointer;box-shadow:none;background:0 0;justify-content:center;align-items:center;gap:10px;font-size:14px;font-weight:700}.room-card.create:hover{color:var(--accent-dark);border-color:var(--accent);box-shadow:none;background:#23b6750d;transform:none}.room-card.create .plus-circle{background:var(--bg-2);width:44px;height:44px;box-shadow:0 2px 0 var(--line);border-radius:50%;justify-content:center;align-items:center;display:flex}.empty-state{text-align:center;color:var(--text-dim);padding:48px 0;font-size:14px;line-height:2}.room-page{flex-direction:column;height:100%;display:flex;overflow:hidden}.room-body{flex:1;min-height:0;display:flex;position:relative}.game-area{flex:1;min-width:0;position:relative}.phaser-host{position:absolute;inset:0}.phaser-host canvas{display:block}.controls-hint{color:var(--text-dim);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);pointer-events:none;border:1.5px solid var(--line);background:#ffffffd6;border-radius:999px;padding:5px 12px;font-size:11px;font-weight:700;position:absolute;top:12px;left:14px}.edit-mode-pill{background:var(--sun-soft);color:var(--warn);pointer-events:none;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1.5px solid #eeda9d;border-radius:999px;padding:6px 14px;font-size:12px;font-weight:700;position:absolute;top:12px;left:50%;transform:translate(-50%)}.control-bar{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:2px solid var(--line);box-shadow:0 4px 0 var(--line), var(--shadow-1);z-index:10;background:#ffffffe3;border-radius:999px;align-items:center;gap:6px;padding:8px;display:flex;position:absolute;bottom:18px;left:50%;transform:translate(-50%)}.control-bar .divider{background:var(--line);width:1.5px;height:24px;margin:0 3px}.ctrl-btn{width:44px;height:44px;color:var(--text-dim);box-shadow:none;background:0 0;border:none;border-radius:50%;padding:0;position:relative}.ctrl-btn:hover:not(:disabled){background:var(--bg-3);color:var(--text)}.ctrl-btn.on{background:var(--accent);color:var(--accent-ink)}.ctrl-btn.on:hover:not(:disabled){color:var(--accent-ink);background:#2cc884}.ctrl-btn.warn-on{background:var(--sun);color:#6b4d05}.ctrl-btn.warn-on:hover:not(:disabled){color:#6b4d05;background:#ffd06b}.ctrl-btn.danger:hover:not(:disabled){color:var(--danger);background:#e35d7522}.ctrl-btn .badge-dot{background:var(--coral);color:#fff;border-radius:999px;justify-content:center;align-items:center;min-width:16px;height:16px;padding:0 4px;font-size:10px;font-weight:800;display:flex;position:absolute;top:4px;right:4px}.ctrl-label{background:var(--text);color:#fffaf0;white-space:nowrap;opacity:0;pointer-events:none;border:none;border-radius:8px;padding:4px 10px;font-size:11px;font-weight:700;transition:opacity .12s,transform .12s;position:absolute;bottom:calc(100% + 10px);left:50%;transform:translate(-50%)translateY(2px)}.ctrl-btn:hover .ctrl-label,.file-ctrl:hover .ctrl-label{opacity:1;transform:translate(-50%)translateY(0)}.file-ctrl{width:44px;height:44px;color:var(--text-dim);cursor:pointer;border-radius:50%;justify-content:center;align-items:center;transition:background .15s,color .15s;display:flex;position:relative}.file-ctrl:hover{background:var(--bg-3);color:var(--text)}.file-ctrl input{display:none}.emote-pop{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:2px solid var(--line);box-shadow:0 4px 0 var(--line), var(--shadow-1);background:#fffe;border-radius:999px;gap:4px;padding:7px 9px;animation:.16s ease-out pop-up;display:flex;position:absolute;bottom:calc(100% + 12px);left:50%;transform:translate(-50%)}@keyframes pop-up{0%{opacity:0;transform:translate(-50%)translateY(6px)scale(.92)}to{opacity:1;transform:translate(-50%)translateY(0)scale(1)}}.emote-pop button{width:42px;height:42px;box-shadow:none;background:0 0;border:none;border-radius:50%;padding:0;font-size:21px;position:relative}.emote-pop button:hover{background:var(--bg-3);transform:scale(1.18)}.emote-pop .key-hint{color:var(--text-faint);font-size:9px;position:absolute;bottom:-2px;right:0}.prop-pop button.sel{background:var(--sun);box-shadow:inset 0 0 0 2px #eeda9d}.edit-mode-pill.carry{color:var(--accent);background:#e3f6ec;border-color:#b8e6cd}.toast-stack{z-index:30;pointer-events:none;flex-direction:column;align-items:center;gap:8px;display:flex;position:absolute;top:14px;left:50%;transform:translate(-50%)}.toast{border:2px solid var(--line-2);color:var(--text);box-shadow:0 3px 0 var(--line), var(--shadow-1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fffffff2;border-radius:999px;max-width:min(90vw,480px);padding:9px 18px;font-size:13px;font-weight:700;animation:.22s cubic-bezier(.2,.9,.3,1.2) toast-in}.toast.error{color:var(--danger);border-color:#f3b7c2}@keyframes toast-in{0%{opacity:0;transform:translateY(-10px)scale(.95)}to{opacity:1;transform:translateY(0)scale(1)}}.sidebar{border-left:1.5px solid var(--line);background:var(--bg-2);z-index:15;flex-direction:column;width:330px;min-height:0;display:flex}.sidebar-head{border-bottom:1.5px solid var(--line);justify-content:space-between;align-items:center;padding:12px 14px 10px;display:flex}.sidebar-head h3{color:var(--text-dim);align-items:center;gap:7px;font-size:13px;font-weight:800;display:flex}.sidebar-head .close-btn{display:none}.participants{border-bottom:1.5px solid var(--line);max-height:32%;padding:8px;overflow-y:auto}.participants ul{margin:0;padding:0;list-style:none}.participants li{border-radius:10px;align-items:center;gap:10px;padding:6px 8px;font-size:13px;display:flex}.participants li:hover{background:var(--bg)}.p-avatar{background:var(--bg-3);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:32px;height:32px;display:flex;position:relative;overflow:hidden}.p-avatar img{object-fit:contain;image-rendering:auto;width:28px;height:28px}.p-avatar.speaking{box-shadow:0 0 0 2px var(--accent);animation:1.1s ease-in-out infinite speak-pulse}@keyframes speak-pulse{0%,to{box-shadow:0 0 0 2px #23b675cc}50%{box-shadow:0 0 0 3.5px #23b67555}}.p-name{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.p-you{color:var(--accent-dark);background:var(--accent-soft);border-radius:999px;flex-shrink:0;padding:2px 8px;font-size:10.5px;font-weight:700}.p-actions{flex-shrink:0;gap:2px;display:none}.participants li:hover .p-actions,.participants li .p-actions.always{display:flex}.p-actions button{color:var(--text-faint);box-shadow:none;background:0 0;border:none;border-radius:8px;padding:5px}.p-actions button:hover{color:var(--text);background:var(--bg-3)}.p-actions button.muted-on{color:var(--danger)}.chat-panel{flex-direction:column;flex:1;min-height:0;display:flex}.chat-log{flex-direction:column;flex:1;gap:2px;padding:14px;display:flex;overflow-y:auto}.chat-day-empty{text-align:center;color:var(--text-faint);margin:auto;font-size:12.5px;line-height:2}.chat-day-empty .big{font-size:26px}.chat-group{flex-direction:column;gap:3px;margin-top:12px;display:flex}.chat-group.self{align-items:flex-end}.chat-meta{color:var(--text-faint);align-items:baseline;gap:7px;padding:0 4px;font-size:11px;display:flex}.chat-name{color:var(--text-dim);font-size:12px;font-weight:800}.chat-group.self .chat-name{color:var(--accent-dark)}.chat-bubble{background:var(--bg);border:1.5px solid var(--line);word-break:break-word;white-space:pre-wrap;border-radius:4px 14px 14px;width:fit-content;max-width:88%;padding:8px 12px;font-size:13.5px;line-height:1.6;animation:.18s ease-out msg-in}.chat-group.self .chat-bubble{background:var(--accent-soft);border-color:#bfe6cf;border-radius:14px 4px 14px 14px}.chat-bubble+.chat-bubble,.chat-group.self .chat-bubble+.chat-bubble{border-radius:14px}@keyframes msg-in{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.chat-system{text-align:center;color:var(--text-faint);margin-top:10px;font-size:11.5px}.chat-system .sys-pill{background:var(--bg-3);border-radius:999px;padding:3px 12px;display:inline-block}.chat-error{color:var(--danger);padding:4px 14px;font-size:12px}.chat-input-row{border-top:1.5px solid var(--line);align-items:center;gap:8px;padding:10px 12px 12px;display:flex}.chat-input-row input{background:var(--bg);border-color:var(--line);border-radius:999px;flex:1;min-width:0;padding:10px 16px}.chat-input-row .send-btn{background:var(--accent);width:40px;height:40px;color:var(--accent-ink);box-shadow:0 2px 0 var(--accent-dark);border-color:#0000;border-radius:50%;flex-shrink:0;padding:0}.chat-input-row .send-btn:hover:not(:disabled){background:#2cc884}.chat-input-row .send-btn:disabled{background:var(--bg-3);color:var(--text-faint);box-shadow:none}.modal-backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:100;background:#463c2f59;justify-content:center;align-items:center;animation:.15s ease-out fade-in;display:flex;position:fixed;inset:0}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.modal{background:var(--bg-2);border:2px solid var(--line-2);width:min(460px,92vw);max-height:88vh;box-shadow:0 6px 0 #78643c26, var(--shadow-2);border-radius:22px;flex-direction:column;gap:14px;padding:24px;animation:.2s cubic-bezier(.2,.9,.3,1.1) modal-in;display:flex;overflow-y:auto}@keyframes modal-in{0%{opacity:0;transform:translateY(14px)scale(.97)}to{opacity:1;transform:translateY(0)scale(1)}}.modal h2{font-size:17px;font-weight:800}.modal label{color:var(--text-dim);flex-direction:column;gap:6px;font-size:12.5px;font-weight:700;display:flex}.modal input,.modal select{background:var(--bg);padding:10px 13px}.modal-actions{justify-content:flex-end;gap:8px;margin-top:4px;display:flex}.form-error{color:var(--danger);background:#e35d7514;border:1.5px solid #e35d7538;border-radius:10px;padding:8px 12px;font-size:13px}.seg-row{grid-auto-columns:1fr;grid-auto-flow:column;gap:8px;display:grid}.seg-option{border:2px solid var(--line);background:var(--bg);cursor:pointer;text-align:left;box-shadow:none;border-radius:14px;flex-direction:column;gap:3px;padding:12px;transition:border-color .15s,background .15s;display:flex}.seg-option:hover{border-color:var(--line-2)}.seg-option.active{border-color:var(--accent);background:var(--accent-soft)}.seg-option .seg-title{color:var(--text);font-size:13.5px;font-weight:800}.seg-option .seg-desc{color:var(--text-dim);font-size:11.5px;font-weight:500}.file-drop{border:2px dashed var(--line-2);text-align:center;color:var(--text-dim);cursor:pointer;background:var(--bg);border-radius:16px;flex-direction:column;align-items:center;gap:8px;padding:18px 14px;font-size:13px;transition:border-color .15s,background .15s,color .15s;display:flex}.file-drop:hover,.file-drop.dragover{border-color:var(--accent);color:var(--accent-dark);background:#23b6750d}.file-drop input{display:none}.avatar-preview{color:var(--text-dim);background:var(--bg);border:1.5px solid var(--line);border-radius:14px;align-items:center;gap:12px;padding:10px 12px;font-size:13px;display:flex}.avatar-preview img{object-fit:contain;image-rendering:auto;background:var(--bg-2);border:1.5px solid var(--line);border-radius:12px;width:56px;height:56px;padding:4px}.avatar-preview .cur-name{color:var(--text);font-weight:700}.settings-modal{width:min(520px,92vw);height:min(480px,88vh)}.settings-modal .modal-actions{margin-top:auto}.settings-tabs{background:var(--bg);border:1.5px solid var(--line);border-radius:12px;gap:6px;padding:4px;display:flex}.settings-tab{color:var(--text-dim);cursor:pointer;box-shadow:none;background:0 0;border:none;border-radius:9px;flex:1;padding:8px 4px;font-size:13px;font-weight:700;transition:background .15s,color .15s}.settings-tab:hover{color:var(--text)}.settings-tab.active{background:var(--accent-soft);color:var(--accent-dark)}.settings-section{border-top:1.5px solid var(--line);flex-direction:column;gap:8px;padding-top:12px;display:flex}.settings-section:first-of-type{border-top:none;padding-top:0}.settings-section h3{color:var(--text-dim);align-items:center;gap:5px;font-size:13px;font-weight:800;display:flex}.name-row{gap:8px;display:flex}.name-row input{background:var(--bg);flex:1;padding:10px 13px}.avatar-slots{grid-template-columns:1fr 1fr;gap:8px;display:grid}.avatar-slot{border:2px solid var(--line);background:var(--bg);cursor:pointer;text-align:center;border-radius:14px;flex-direction:column;align-items:center;gap:6px;padding:12px;transition:border-color .15s,background .15s;display:flex}.avatar-slot:hover{border-color:var(--line-2)}.avatar-slot.target{border-style:dashed;border-color:var(--accent)}.avatar-slot.active{border-color:var(--accent);background:var(--accent-soft)}.avatar-slot .slot-label{color:var(--text-dim);align-items:center;gap:6px;font-size:11.5px;font-weight:800;display:flex}.avatar-slot .slot-badge{color:var(--accent-dark);background:var(--bg-2);border:1px solid var(--accent);border-radius:999px;padding:1px 7px;font-size:10px}.avatar-slot .thumb img{object-fit:contain;background:var(--bg-2);border:1.5px solid var(--line);border-radius:12px;width:56px;height:56px;padding:4px}.avatar-slot .slot-name{color:var(--text);flex-direction:column;gap:2px;font-size:12.5px;font-weight:700;display:flex}.avatar-slot .slot-name small{color:var(--text-faint);font-size:10.5px;font-weight:500}.avatar-slot .slot-actions{align-items:center;gap:6px;display:flex}.avatar-slot .slot-actions .primary{padding:5px 14px;font-size:12px}.avatar-slot .slot-empty{color:var(--text-faint);padding:18px 0;font-size:12.5px}.social-list{flex-direction:column;gap:4px;list-style:none;display:flex}.social-list li{background:var(--bg);border:1.5px solid var(--line);border-radius:10px;justify-content:space-between;align-items:center;gap:8px;padding:6px 8px 6px 12px;display:flex}.social-list .s-name{text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:700;overflow:hidden}.social-list button{flex-shrink:0;padding:5px 10px;font-size:12px}.p-actions button.friend-on{color:var(--warn,#e0a12f)}.p-name .friend-mark{color:var(--warn,#e0a12f);vertical-align:-1px;margin-left:4px}.page-center{height:100%;color:var(--text-dim);text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:20px;display:flex}.spinner{border:3px solid var(--line-2);border-top-color:var(--accent);border-radius:50%;width:30px;height:30px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@media (width<=900px){.sidebar{width:min(340px,92vw);box-shadow:var(--shadow-2);transition:transform .25s cubic-bezier(.2,.9,.3,1);position:absolute;top:0;bottom:0;right:0;transform:translate(105%)}.sidebar.open{transform:translate(0)}.sidebar-head .close-btn{display:inline-flex}.control-bar{gap:2px;padding:6px;bottom:12px}.ctrl-btn,.file-ctrl{width:40px;height:40px}.room-title{max-width:40vw}.controls-hint{display:none}.hero-bubble.b1{left:8px}.hero-bubble.b2{left:auto;right:8px}}