*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased;image-rendering:pixelated}body{font-family:var(--font-chat);background:var(--color-bg-primary);color:var(--color-text-primary);min-height:100dvh;overflow:hidden}#root{min-height:100dvh;display:flex;flex-direction:column}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--color-bg-primary)}::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:0}::selection{background:var(--color-border);color:var(--color-text-primary)}input,button,textarea{font-family:inherit;font-size:inherit;color:inherit}a{color:var(--color-accent-6);text-decoration:none}:root{--color-bg-primary: #0f0e17;--color-bg-secondary: #1a1932;--color-bg-input: #12112a;--color-bg-hover: #252447;--color-border: #e94560;--color-border-alt: #533483;--color-border-dim: #3a2060;--color-text-primary: #fffffe;--color-text-dim: #a7a9be;--color-text-say: #a8e6cf;--color-text-emote: #ffd3b6;--color-text-yell: #ff6b6b;--color-text-page: #c7ceea;--color-text-system: #6b6b8d;--color-accent-1: #ff6b6b;--color-accent-2: #a8e6cf;--color-accent-3: #ffd93d;--color-accent-4: #6c5ce7;--color-accent-5: #d63384;--color-accent-6: #20c997;--color-online: #51cf66;--color-away: #ffd43b;--color-idle: #868e96;--font-pixel: "Press Start 2P", monospace;--font-chat: "IBM Plex Mono", "Courier New", monospace;--border-pixel: 3px solid var(--color-border);--border-pixel-dim: 2px solid var(--color-border-dim);--shadow-pixel: 4px 4px 0 rgba(0, 0, 0, .6);--shadow-glow: 0 0 12px rgba(233, 69, 96, .3)}@keyframes bounce-in{0%{transform:scale(0);opacity:0}50%{transform:scale(1.15)}to{transform:scale(1);opacity:1}}@keyframes slide-up{0%{transform:translateY(8px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-3px)}40%{transform:translate(3px)}60%{transform:translate(-2px)}80%{transform:translate(2px)}}@keyframes sparkle{0%,to{opacity:1}50%{opacity:.4}}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}@keyframes pulse-glow{0%,to{box-shadow:0 0 8px #e9456033}50%{box-shadow:0 0 20px #e9456080}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.animate-slide-up{animation:slide-up .15s ease-out}.animate-shake{animation:shake .3s ease-in-out}.animate-bounce-in{animation:bounce-in .3s ease-out}.animate-sparkle{animation:sparkle 1.5s ease-in-out infinite}.animate-blink{animation:blink 1s step-end infinite}.animate-float{animation:float 3s ease-in-out infinite}.animate-fade-in{animation:fade-in .3s ease-out}.welcome{min-height:100dvh;display:flex;align-items:center;justify-content:center;background:var(--color-bg-primary);position:relative;overflow:hidden}.welcome__container{display:flex;flex-direction:column;align-items:center;gap:2rem;padding:2rem;position:relative;z-index:1}.welcome__logo{text-align:center}.welcome__title{font-family:var(--font-pixel);font-size:clamp(1.5rem,6vw,3rem);color:var(--color-border);text-shadow:4px 4px 0 rgba(0,0,0,.5),0 0 20px rgba(233,69,96,.4);letter-spacing:4px}.welcome__subtitle{font-family:var(--font-pixel);font-size:clamp(.5rem,2vw,.75rem);color:var(--color-accent-6);margin-top:.5rem;letter-spacing:6px;text-transform:uppercase}.welcome__stars{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none}.welcome__star{position:absolute;width:3px;height:3px;background:var(--color-accent-3);border-radius:0}.welcome__form{display:flex;flex-direction:column;align-items:center;gap:1rem;width:100%;max-width:360px}.welcome__label{font-family:var(--font-pixel);font-size:.625rem;color:var(--color-text-dim);letter-spacing:2px}.welcome__input{width:100%;padding:.75rem 1rem;font-family:var(--font-pixel);font-size:.875rem;background:var(--color-bg-input);color:var(--color-text-primary);border:var(--border-pixel);outline:none;text-align:center;letter-spacing:2px;caret-color:var(--color-border)}.welcome__input:focus{box-shadow:var(--shadow-glow)}.welcome__input::placeholder{color:var(--color-border-dim)}.welcome__input:disabled{opacity:.5}.welcome__error{font-family:var(--font-pixel);font-size:.5rem;color:var(--color-accent-1);text-align:center}.welcome__footer{font-family:var(--font-pixel);font-size:.5rem;color:var(--color-text-dim);opacity:.5;letter-spacing:1px}.pixel-button{font-family:var(--font-pixel);font-size:.75rem;padding:.875rem 2rem;border:var(--border-pixel);background:var(--color-bg-secondary);color:var(--color-text-primary);cursor:pointer;box-shadow:var(--shadow-pixel);letter-spacing:2px;transition:transform .1s,box-shadow .1s;position:relative}.pixel-button:hover:not(:disabled){transform:translate(-2px,-2px);box-shadow:6px 6px #0009;background:var(--color-bg-hover)}.pixel-button:active:not(:disabled){transform:translate(2px,2px);box-shadow:1px 1px #0009}.pixel-button:disabled{opacity:.4;cursor:not-allowed}.pixel-button--primary{border-color:var(--color-border)}.pixel-button--secondary{border-color:var(--color-border-alt)}.pixel-panel{background:var(--color-bg-secondary);border:var(--border-pixel-dim);box-shadow:var(--shadow-pixel)}.pixel-panel--glow{box-shadow:var(--shadow-pixel),var(--shadow-glow)}.topbar{display:flex;align-items:center;gap:1rem;padding:.5rem 1rem;background:var(--color-bg-secondary);border-bottom:var(--border-pixel-dim);min-height:44px}.topbar__menu-btn{display:none;background:none;border:none;color:var(--color-text-primary);font-size:1.25rem;cursor:pointer;padding:.25rem}.topbar__title{font-family:var(--font-pixel);font-size:.625rem;color:var(--color-border);letter-spacing:2px;flex-shrink:0}.topbar__channel{font-family:var(--font-pixel);font-size:.5rem;color:var(--color-accent-6);padding:.25rem .5rem;border:1px solid var(--color-border-dim);border-radius:0}.topbar__spacer{flex:1}.topbar__user{font-family:var(--font-chat);font-size:.8rem;font-weight:500;flex-shrink:0}@media(max-width:640px){.topbar__menu-btn{display:block}}.presence-dot{display:inline-block;width:6px;height:6px;flex-shrink:0}.presence-dot--online{background:var(--color-online);box-shadow:0 0 4px var(--color-online)}.presence-dot--away{background:var(--color-away);box-shadow:0 0 4px var(--color-away)}.presence-dot--idle{background:var(--color-idle)}.user-badge{display:flex;align-items:center;gap:.35rem;padding:.3rem .5rem;font-family:var(--font-chat);font-size:.75rem;border-radius:0;cursor:default;transition:background .1s}.user-badge:hover{background:var(--color-bg-hover)}.user-badge--me{background:#e9456014}.user-badge__line{color:var(--color-text-dim);font-size:.7rem;flex-shrink:0}.user-badge__name{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.user-badge__away{font-size:.6rem;color:var(--color-away);font-style:italic}.user-badge__you{font-family:var(--font-pixel);font-size:.4rem;color:var(--color-accent-6);border:1px solid var(--color-accent-6);padding:1px 4px;letter-spacing:1px;flex-shrink:0}.user-list{display:flex;flex-direction:column;gap:2px}.user-list__header{font-family:var(--font-pixel);font-size:.45rem;color:var(--color-text-dim);padding:.25rem .5rem;letter-spacing:1px;text-transform:uppercase}.channel-badge{display:flex;align-items:center;gap:.35rem;padding:.4rem .5rem;font-family:var(--font-chat);font-size:.75rem;background:none;border:none;color:var(--color-text-dim);cursor:pointer;text-align:left;width:100%;transition:background .1s,color .1s}.channel-badge:hover{background:var(--color-bg-hover);color:var(--color-text-primary)}.channel-badge--active{background:#e9456014;color:var(--color-accent-6)}.channel-badge__hash{color:var(--color-border-dim);flex-shrink:0}.channel-badge--active .channel-badge__hash{color:var(--color-accent-6)}.channel-badge__name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.channel-badge__count{font-size:.65rem;color:var(--color-text-dim);opacity:.6;flex-shrink:0}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:200}.modal-box{width:90%;max-width:340px;padding:1.5rem;display:flex;flex-direction:column;gap:1rem}.modal-box__title{font-family:var(--font-pixel);font-size:.625rem;color:var(--color-border);text-align:center;letter-spacing:2px}.modal-box__input{width:100%;padding:.6rem .75rem;font-family:var(--font-chat);font-size:.85rem;background:var(--color-bg-input);color:var(--color-text-primary);border:2px solid var(--color-border-dim);outline:none;caret-color:var(--color-border)}.modal-box__input:focus{border-color:var(--color-border)}.modal-box__actions{display:flex;gap:.75rem;justify-content:center}.modal-box__actions .pixel-button{font-size:.5rem;padding:.5rem 1rem}.channel-list{display:flex;flex-direction:column;gap:2px}.channel-list__header{display:flex;align-items:center;justify-content:space-between;padding:.25rem .5rem;font-family:var(--font-pixel);font-size:.45rem;color:var(--color-text-dim);letter-spacing:1px;text-transform:uppercase}.channel-list__create-btn{font-family:var(--font-pixel);font-size:.75rem;color:var(--color-accent-6);background:none;border:1px solid var(--color-accent-6);width:20px;height:20px;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;line-height:1}.channel-list__create-btn:hover{background:var(--color-accent-6);color:var(--color-bg-primary)}.side-panel{width:220px;display:flex;flex-direction:column;background:var(--color-bg-secondary);border-right:var(--border-pixel-dim);flex-shrink:0;overflow:hidden}.side-panel__tabs{display:flex;border-bottom:1px solid var(--color-border-dim)}.side-panel__tab{flex:1;padding:.5rem;font-family:var(--font-pixel);font-size:.5rem;color:var(--color-text-dim);background:none;border:none;cursor:pointer;letter-spacing:1px;transition:color .15s}.side-panel__tab:hover{color:var(--color-text-primary)}.side-panel__tab--active{color:var(--color-accent-6);border-bottom:2px solid var(--color-accent-6)}.side-panel__content{flex:1;overflow-y:auto;padding:.5rem}@media(max-width:640px){.side-panel{position:absolute;top:0;left:0;bottom:0;z-index:100;width:260px;box-shadow:8px 0 24px #00000080}}.chat-msg{font-family:var(--font-chat);font-size:.85rem;line-height:1.5;padding:1px 0;word-wrap:break-word}.chat-msg--say{color:var(--color-text-say)}.chat-msg--emote{color:var(--color-text-emote)}.chat-msg--yell{color:var(--color-text-yell);font-weight:700}.chat-msg--page{color:var(--color-text-page);font-style:italic}.chat-msg--system{color:var(--color-text-system);font-size:.8rem;font-style:italic}.chat-msg--mine .chat-msg__prefix{opacity:.8}.chat-msg__prefix{font-weight:700}.chat-msg__star{color:var(--color-border)}.chat-window{flex:1;overflow-y:auto;padding:.5rem 1rem;display:flex;flex-direction:column;gap:2px}.chat-window__empty{display:flex;align-items:center;justify-content:center;height:100%;font-family:var(--font-pixel);font-size:.5rem;color:var(--color-text-dim);text-align:center;line-height:2}.chat-window__cmd{color:var(--color-accent-6);margin:0 .25em}.chat-input{display:flex;align-items:center;padding:.5rem 1rem;background:var(--color-bg-secondary);border-top:var(--border-pixel-dim);gap:.5rem}.chat-input__prompt{font-family:var(--font-pixel);font-size:.75rem;color:var(--color-border);flex-shrink:0}.chat-input__field{flex:1;padding:.5rem .75rem;font-family:var(--font-chat);font-size:.9rem;background:var(--color-bg-input);color:var(--color-text-primary);border:2px solid var(--color-border-dim);outline:none;caret-color:var(--color-border)}.chat-input__field:focus{border-color:var(--color-border);box-shadow:0 0 8px #e9456033}.chat-input__field::placeholder{color:var(--color-text-dim);opacity:.4;font-size:.8rem}.haven-shell{display:flex;flex-direction:column;height:100dvh;background:var(--color-bg-primary)}.haven-shell__body{display:flex;flex:1;overflow:hidden}.haven-shell__main{flex:1;display:flex;flex-direction:column;overflow:hidden}@media(max-width:640px){.haven-shell__body{position:relative}}.toast{position:fixed;bottom:80px;left:50%;transform:translate(-50%) translateY(20px);font-family:var(--font-pixel);font-size:.5rem;color:var(--color-text-primary);background:var(--color-accent-1);padding:.5rem 1rem;z-index:300;opacity:0;transition:opacity .3s,transform .3s;letter-spacing:1px;box-shadow:var(--shadow-pixel)}.toast--visible{opacity:1;transform:translate(-50%) translateY(0)}