*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;font-size:16px}body{background:#060614;margin:0;padding:0;overflow:hidden}*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--ember-white:#fff5e6;--ember-cream:#ffecd2;--ember-gold:#ffd54f;--ember-amber:#ff8f00;--ember-orange:#e64a19;--ember-deep:#bf360c;--ember-coal:#1a0800;--night-void:#050510;--night-deep:#08081a;--night-blue:#0c1228;--night-warm:#0d0600;--glass-warm:#1e0f05a6;--glass-border:#ff8f002e;--glass-border-focus:#ffb43c73;--font-jp:"Zen Maru Gothic", "Hiragino Kaku Gothic ProN", sans-serif;--font-en:"Outfit", sans-serif;--font-display:"DM Serif Display", serif;--app-h:100dvh;--radius-pill:999px;--radius-card:18px;--ease-out-expo:cubic-bezier(.16, 1, .3, 1);--ease-spring:cubic-bezier(.22, 1, .36, 1)}html,body,#root{background:var(--night-void);width:100%;height:100%;font-family:var(--font-jp);-webkit-font-smoothing:antialiased;overflow:hidden}.app-root{width:100%;height:var(--app-h);background:radial-gradient(60% 40% at 50% 58%,#ff64000f 0%,#0000 100%),linear-gradient(#070e1f 0%,#0a1430 10%,#0d1035 25%,#100a2a 40%,#120810 58%,#140800 78%,#0a0400 100%);position:relative;overflow:hidden}.app-root:before{content:"";z-index:0;opacity:.025;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:128px 128px;position:absolute;inset:0}.app-root:after{content:"";z-index:0;pointer-events:none;background:radial-gradient(70% 60%,#0000 40%,#0006 100%);position:absolute;inset:0}.scene-canvas{z-index:1;width:min(100%,480px);height:100%;position:absolute;top:0;left:50%;transform:translate(-50%)}.stars{z-index:0;pointer-events:none;position:absolute;inset:0}.star{background:#fff;border-radius:50%;animation:ease-in-out infinite twinkle;position:absolute;box-shadow:0 0 2px 1px #ffffffe6,0 0 6px 2px #dce6ff59,0 0 14px 3px #c8d7ff1a}.star.bright{box-shadow:0 0 3px 2px #fff,0 0 8px 3px #ffffffa6,0 0 20px 5px #c8d7ff4d,0 0 36px 8px #b4c8ff1a}.star.bright:before,.star.bright:after{content:"";animation:inherit;background:#ffffff8c;border-radius:2px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.star.bright:before{width:1px;height:12px}.star.bright:after{width:12px;height:1px}@keyframes twinkle{0%,to{opacity:.06;transform:scale(.7)}45%{opacity:.65;transform:scale(1)}50%{opacity:1;transform:scale(1.2)}55%{opacity:.65;transform:scale(1)}}.online-counter{top:env(safe-area-inset-top,12px);z-index:10;background:var(--glass-warm);border:1px solid var(--glass-border);-webkit-backdrop-filter:blur(16px)saturate(1.4);border-radius:var(--radius-pill);transition:transform .2s var(--ease-spring);align-items:center;gap:6px;margin-top:12px;padding:7px 14px 7px 10px;display:flex;position:absolute;right:16px}.online-counter.bump{animation:bump .45s var(--ease-spring)}@keyframes bump{0%{transform:scale(1)}35%{transform:scale(1.12)}to{transform:scale(1)}}.counter-dot{background:#66bb6a;border-radius:50%;width:7px;height:7px;animation:2.5s infinite pulse-dot;box-shadow:0 0 6px #66bb6acc}@keyframes pulse-dot{0%,to{box-shadow:0 0 4px #66bb6a99}50%{box-shadow:0 0 10px #66bb6ae6,0 0 20px #66bb6a4d}}.counter-flame-icon{filter:saturate(1.3);font-size:13px;line-height:1}.counter-number{font-family:var(--font-en);color:var(--ember-gold);letter-spacing:.02em;font-size:15px;font-weight:600}.counter-label{font-family:var(--font-jp);color:#ffc88c80;letter-spacing:.04em;font-size:10px;font-weight:500}.bottom-ui{z-index:10;width:min(100%,480px);padding:0 24px calc(env(safe-area-inset-bottom,20px) + 24px);animation:bottom-ui-in .8s var(--ease-out-expo) .3s both;background:linear-gradient(#0000 0%,#050510b3 50%,#050510f7 100%);flex-direction:column;align-items:center;display:flex;position:absolute;bottom:0;left:50%;transform:translate(-50%)}@keyframes bottom-ui-in{0%{opacity:0;transform:translate(-50%)translateY(30px)}to{opacity:1;transform:translate(-50%)translateY(0)}}.join-btn{border-radius:var(--radius-pill);cursor:pointer;width:100%;max-width:300px;font-family:var(--font-jp);letter-spacing:.08em;color:var(--ember-coal);transition:transform .15s var(--ease-spring), box-shadow .15s ease;-webkit-tap-highlight-color:transparent;background:linear-gradient(135deg,#ffe082 0%,#ffb300 40%,#ff8f00 70%,#e65100 100%);border:none;align-items:center;gap:10px;padding:17px 28px;font-size:17px;font-weight:700;animation:3s ease-in-out infinite join-pulse;display:flex;position:relative;box-shadow:0 0 24px #ff8f008c,0 8px 32px #ff570059,inset 0 1px #ffffff59,inset 0 -2px #00000014}@keyframes join-pulse{0%,to{box-shadow:0 0 24px #ff8f008c,0 8px 32px #ff570059,inset 0 1px #ffffff59,inset 0 -2px #00000014}50%{box-shadow:0 0 40px #ff8f00bf,0 8px 48px #ff570080,inset 0 1px #ffffff59,inset 0 -2px #00000014}}.join-btn:active{animation:none;transform:scale(.96);box-shadow:0 0 12px #ff8f0066,0 3px 16px #ff570040,inset 0 1px #fff3}.join-btn-icon{filter:saturate(1.5);font-size:22px}.join-btn-text{text-align:center;flex:1;margin-right:22px}.join-status{font-family:var(--font-jp);color:var(--ember-gold);letter-spacing:.06em;text-shadow:0 0 12px #ffd54f66;font-size:14px;font-weight:500;animation:3s infinite glow-text}@keyframes glow-text{0%,to{text-shadow:0 0 8px #ffd54f59}50%{text-shadow:0 0 20px #ffd54fb3,0 0 50px #ff8f0033}}.self-glow-pulse{animation:2.5s ease-in-out infinite self-pulse}@keyframes self-pulse{0%,to{opacity:.18;r:34}50%{opacity:.38;r:38}}.chat-panel{z-index:10;pointer-events:none;flex-direction:column;width:min(100%,480px);display:flex;position:absolute;bottom:0;left:50%;transform:translate(-50%)}.chat-messages{pointer-events:auto;scrollbar-width:none;flex-direction:column;flex:1;gap:5px;max-height:200px;padding:0 16px 8px;display:flex;overflow-y:auto;-webkit-mask-image:linear-gradient(#0000 0%,#000 30%);mask-image:linear-gradient(#0000 0%,#000 30%)}.chat-msg{max-width:72%;animation:msg-in .4s var(--ease-spring) both;flex-direction:column;gap:2px;display:flex}.chat-msg--self{align-self:flex-end}@keyframes msg-in{0%{opacity:0;transform:translateY(12px)scale(.92)}to{opacity:1;transform:translateY(0)scale(1)}}.chat-msg-name{font-family:var(--font-jp);letter-spacing:.05em;opacity:.8;padding-left:12px;font-size:10px;font-weight:700}.chat-msg-body{font-family:var(--font-jp);color:var(--ember-cream);background:var(--glass-warm);border:1px solid var(--glass-border);-webkit-backdrop-filter:blur(14px)saturate(1.2);word-break:break-word;border-radius:16px 16px 16px 4px;padding:8px 14px;font-size:13px;font-weight:400;line-height:1.55}.chat-msg--self .chat-msg-body{background:#ff780024;border-color:#ffb45033;border-radius:16px 16px 4px}.chat-input-form{padding:10px 16px calc(env(safe-area-inset-bottom,16px) + 16px);pointer-events:auto;background:linear-gradient(#0000 0%,#050510a6 35%,#050510f7 100%);align-items:center;gap:8px;display:flex}.chat-input{border:1px solid var(--glass-border);border-radius:var(--radius-pill);-webkit-backdrop-filter:blur(10px);height:42px;color:var(--ember-cream);font-family:var(--font-jp);background:#140a04cc;outline:none;flex:1;padding:0 18px;font-size:14px;font-weight:400;transition:border-color .25s,box-shadow .25s}.chat-input::placeholder{color:#ffb4784d;font-weight:400}.chat-input:focus{border-color:var(--glass-border-focus);box-shadow:0 0 20px #ff78001a,inset 0 0 12px #ff780008}.chat-send-btn{background:linear-gradient(145deg, var(--ember-amber), var(--ember-orange));width:42px;height:42px;color:var(--ember-white);cursor:pointer;transition:transform .12s var(--ease-spring), opacity .2s, box-shadow .2s;-webkit-tap-highlight-color:transparent;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;display:flex;box-shadow:0 2px 12px #ff64004d}.chat-send-btn:disabled{opacity:.25;cursor:default;box-shadow:none}.chat-send-btn:not(:disabled):active{transform:scale(.88)}.settings-btn{top:env(safe-area-inset-top,12px);z-index:10;border:1px solid var(--glass-border);background:var(--glass-warm);-webkit-backdrop-filter:blur(16px)saturate(1.4);color:#ffc88c99;cursor:pointer;width:38px;height:38px;transition:color .2s, border-color .2s, transform .2s var(--ease-spring);-webkit-tap-highlight-color:transparent;border-radius:50%;justify-content:center;align-items:center;margin-top:12px;display:flex;position:absolute;left:16px}.settings-btn:active{color:var(--ember-gold);border-color:var(--glass-border-focus);transform:scale(.92)rotate(-15deg)}.settings-overlay{z-index:100;-webkit-backdrop-filter:blur(6px);background:#0000008c;justify-content:center;align-items:center;animation:.3s both settings-fade-in;display:flex;position:fixed;inset:0}@keyframes settings-fade-in{0%{opacity:0}to{opacity:1}}.settings-panel{scrollbar-width:none;width:min(360px,100% - 32px);max-height:calc(100dvh - 60px);animation:settings-slide-up .4s var(--ease-spring) both;background:radial-gradient(80% 50% at 50% 0,#ff64000f 0%,#0000 60%),linear-gradient(175deg,#1c0f06 0%,#0e0804 50%,#0a0604 100%);border:1px solid #ff8f0026;border-radius:24px;padding:24px 24px 28px;overflow-y:auto;box-shadow:0 0 60px #ff500014,0 24px 80px #0009}@keyframes settings-slide-up{0%{opacity:0;transform:translateY(32px)scale(.94)}to{opacity:1;transform:translateY(0)scale(1)}}.settings-header{justify-content:space-between;align-items:center;margin-bottom:20px;display:flex}.settings-title{font-family:var(--font-jp);color:var(--ember-gold);letter-spacing:.08em;font-size:17px;font-weight:700}.settings-close{color:#ffc88c80;cursor:pointer;-webkit-tap-highlight-color:transparent;background:#ffffff0d;border:none;border-radius:50%;justify-content:center;align-items:center;width:34px;height:34px;transition:background .15s,color .15s,transform .15s;display:flex}.settings-close:active{color:#ffc88ccc;background:#ffffff1a;transform:scale(.9)}.settings-preview{background:radial-gradient(circle at 50% 70%,#ff780014 0%,#0000 70%),#ff500008;border:1px solid #ff8f000f;border-radius:16px;justify-content:center;margin-bottom:22px;padding:18px 0;display:flex}.settings-label{font-family:var(--font-jp);color:#ffb47880;letter-spacing:.12em;text-transform:uppercase;margin-top:18px;margin-bottom:8px;font-size:11px;font-weight:700;display:block}.settings-label:first-of-type{margin-top:0}.settings-name-input{border:1px solid var(--glass-border);width:100%;height:44px;color:var(--ember-cream);font-family:var(--font-jp);background:#140a04cc;border-radius:12px;outline:none;padding:0 16px;font-size:16px;font-weight:500;transition:border-color .25s,box-shadow .25s}.settings-name-input:focus{border-color:var(--glass-border-focus);box-shadow:0 0 16px #ff78001a}.settings-swatches{flex-wrap:wrap;gap:10px;display:flex}.settings-swatch{cursor:pointer;width:36px;height:36px;transition:transform .15s var(--ease-spring), border-color .2s, box-shadow .2s;-webkit-tap-highlight-color:transparent;border:2.5px solid #0000;border-radius:50%;box-shadow:0 2px 8px #0000004d}.settings-swatch:active{transform:scale(.88)}.settings-swatch.active{border-color:var(--ember-gold);transform:scale(1.12);box-shadow:0 0 0 2px #ffd54f40,0 0 14px #ffd54f4d}.settings-save-btn{border-radius:var(--radius-pill);cursor:pointer;width:100%;font-family:var(--font-jp);letter-spacing:.08em;color:var(--ember-coal);transition:transform .12s var(--ease-spring), box-shadow .15s;-webkit-tap-highlight-color:transparent;background:linear-gradient(135deg,#ffe082 0%,#ffb300 40%,#ff8f00 70%,#e65100 100%);border:none;margin-top:26px;padding:14px 0;font-size:16px;font-weight:700;display:block;box-shadow:0 0 20px #ff8f0059,0 4px 24px #ff570033,inset 0 1px #ffffff4d}.settings-save-btn:active{transform:scale(.96);box-shadow:0 0 10px #ff8f004d,0 2px 12px #ff570026}::-webkit-scrollbar{display:none}