.overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none}.chat-bubble{position:absolute;bottom:100%;left:50%;transform:translate(-50%);background:#fff;border-radius:15px;padding:8px 14px;margin-bottom:10px;max-width:350px;min-width:120px;word-wrap:break-word;white-space:normal;box-shadow:0 2px 10px #0003;animation:bubbleAppear .3s ease-out;z-index:100}.chat-bubble:after{content:"";position:absolute;bottom:-10px;left:50%;transform:translate(-50%);border-width:10px 10px 0;border-style:solid;border-color:white transparent transparent}.chat-bubble-username{font-weight:700;color:#9147ff;font-size:12px;margin-bottom:4px}.chat-bubble-message{color:#333;font-size:14px;line-height:1.3}@keyframes bubbleAppear{0%{opacity:0;transform:translate(-50%) translateY(10px) scale(.8)}to{opacity:1;transform:translate(-50%) translateY(0) scale(1)}}.critter{position:absolute;bottom:0;display:flex;flex-direction:column;align-items:center;transition:transform .3s ease}.critter-sprite{width:clamp(80px,10vw,150px);height:auto;image-rendering:auto;animation:breathing 3s ease-in-out infinite;transition:transform .1s ease-out}.sprite-container{position:relative;display:flex;justify-content:center;align-items:flex-end}.animated-sprite.animated-overlay{position:absolute;bottom:0;left:50%;margin-left:-60px}.sprite-container:has(.animated-sprite) .fallback-sprite{visibility:hidden}.animated-sprite{image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges;animation:none}.critter-sprite.no-breathing{animation:none}.critter-sprite.walking{animation:breathing 3s ease-in-out infinite,walking .3s ease-in-out infinite}@keyframes walking{0%,to{transform:translateY(0)}50%{transform:translateY(-3px)}}@keyframes breathing{0%,to{transform:scaleY(1) translateY(0)}50%{transform:scaleY(1.02) translateY(-2px)}}.critter.mouth-open .critter-sprite{animation:breathing 3s ease-in-out infinite,mouthMovement .3s ease-in-out infinite}@keyframes mouthMovement{0%,to{transform:scaleY(1.02) translateY(-2px)}50%{transform:scaleY(1) translateY(0)}}.critter.being-petted{animation:petBounce .5s ease-in-out}@keyframes petBounce{0%,to{transform:translateY(0) rotate(0)}25%{transform:translateY(-10px) rotate(-5deg)}75%{transform:translateY(-10px) rotate(5deg)}}.critter.being-fed .critter-sprite{animation:feedBounce .3s ease-in-out infinite}@keyframes feedBounce{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}.critter-name{color:#fff;font-size:clamp(10px,1.2vw,14px);font-weight:700;text-shadow:1px 1px 2px black,-1px -1px 2px black,1px -1px 2px black,-1px 1px 2px black;margin-top:5px;text-align:center;max-width:clamp(80px,10vw,150px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.critter.spawning{animation:spawnIn .5s ease-out}@keyframes spawnIn{0%{opacity:0;transform:translateY(50px) scale(.5)}to{opacity:1;transform:translateY(0) scale(1)}}.critter.despawning{animation:spawnOut .5s ease-in forwards}@keyframes spawnOut{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(50px) scale(.5)}}.critter.sleeping .sprite-container{filter:grayscale(.8) brightness(.5);transition:filter .8s ease}.critter.sleeping .critter-name{opacity:.5}.sleep-indicator{position:absolute;top:-10px;right:-5px;pointer-events:none}.zzz{position:absolute;font-size:14px;font-weight:700;color:#fff;text-shadow:1px 1px 2px rgba(0,0,0,.5);opacity:0;animation:floatZzz 3s ease-in-out infinite}.zzz.z1{right:0;animation-delay:0s}.zzz.z2{right:-8px;font-size:11px;animation-delay:1s}.zzz.z3{right:-14px;font-size:9px;animation-delay:2s}@keyframes floatZzz{0%{opacity:0;transform:translateY(0)}20%{opacity:.8}to{opacity:0;transform:translateY(-25px)}}.heart{position:absolute;font-size:20px;animation:floatHeart 1s ease-out forwards;pointer-events:none}@keyframes floatHeart{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-50px) scale(1.5)}}.food-particle{position:absolute;font-size:16px;animation:floatFood .8s ease-out forwards;pointer-events:none}@keyframes floatFood{0%{opacity:1;transform:translateY(0) rotate(0)}to{opacity:0;transform:translateY(-30px) rotate(180deg)}}.critter-container{position:absolute;bottom:0;left:0;width:100%;height:25vh;min-height:200px;max-height:400px}.status-display{position:fixed;bottom:10px;left:10px;background:#000000b3;color:#fff;padding:8px 12px;border-radius:5px;font-size:12px;z-index:1000;pointer-events:none}.auth-prompt{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1000;pointer-events:auto}.auth-prompt-content{background:#0e0e10f2;border:2px solid #9147ff;border-radius:12px;padding:30px 40px;text-align:center;color:#fff;box-shadow:0 10px 40px #00000080}.auth-prompt h2{margin:0 0 10px;font-size:24px;color:#efeff1}.auth-prompt p{margin:0 0 20px;color:#adadb8;font-size:14px}.auth-button{display:inline-flex;align-items:center;gap:10px;background:#9147ff;color:#fff;border:none;padding:12px 24px;font-size:16px;font-weight:600;border-radius:6px;cursor:pointer;transition:background .2s}.auth-button:hover{background:#772ce8}.auth-button svg{flex-shrink:0}.auth-link{display:block;margin-top:15px;color:#9147ff;font-size:12px;text-decoration:none}.auth-link:hover{text-decoration:underline}.create-critter-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000c;z-index:10001;display:flex;align-items:center;justify-content:center;pointer-events:auto}.create-critter-panel{background:#1a1a2e;border-radius:12px;width:90%;max-width:600px;max-height:90vh;overflow-y:auto;box-shadow:0 8px 32px #00000080;border:1px solid #9147ff}.create-critter-header{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid #2a2a4a;position:sticky;top:0;background:#1a1a2e;z-index:1}.create-critter-header h2{margin:0;color:#fff;font-size:1.5rem}.create-critter-header .close-btn{background:none;border:none;color:#888;font-size:28px;cursor:pointer;padding:0;line-height:1;transition:color .2s}.create-critter-header .close-btn:hover{color:#fff}.create-critter-content{padding:20px}.error-message{background:#ff525233;border:1px solid #ff5252;color:#ff5252;padding:12px;border-radius:8px;margin-bottom:20px}.create-critter-form{display:flex;flex-direction:column;gap:20px}.form-group{display:flex;flex-direction:column;gap:8px}.form-group label{color:#bbb;font-size:.9rem}.form-group input[type=text]{padding:12px;border-radius:8px;border:1px solid #3a3a5a;background:#0e0e1a;color:#fff;font-size:1rem}.form-group input[type=text]:focus{outline:none;border-color:#9147ff}.type-key-preview{color:#666;font-size:.8rem}.image-uploads{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}@media (max-width: 500px){.image-uploads{grid-template-columns:1fr}}.image-upload-group{display:flex;flex-direction:column;gap:8px}.image-upload-group label{color:#bbb;font-size:.85rem;text-align:center}.upload-zone{aspect-ratio:1;border:2px dashed #3a3a5a;border-radius:12px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;position:relative;overflow:hidden;background:#0e0e1a}.upload-zone:hover{border-color:#9147ff;background:#9147ff1a}.upload-zone span{color:#666;font-size:.85rem}.upload-zone.has-image{border-style:solid;border-color:#9147ff}.upload-zone img{width:100%;height:100%;object-fit:contain;padding:8px}.upload-zone .remove-image{position:absolute;top:4px;right:4px;background:#ff5252e6;border:none;color:#fff;width:24px;height:24px;border-radius:50%;cursor:pointer;font-size:16px;line-height:1;display:flex;align-items:center;justify-content:center}.upload-zone .remove-image:hover{background:#ff5252}.submit-btn{padding:14px 24px;background:#9147ff;color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s}.submit-btn:hover:not(:disabled){background:#7c3aed;transform:translateY(-1px)}.custom-types-section{margin-top:30px;padding-top:20px;border-top:1px solid #2a2a4a}.custom-types-section h3{color:#fff;margin:0 0 16px;font-size:1.1rem}.loading-text,.no-types-text{color:#666;font-size:.9rem;text-align:center;padding:20px}.custom-types-list{display:flex;flex-direction:column;gap:12px}.custom-type-item{display:flex;align-items:center;gap:12px;padding:12px;background:#0e0e1a;border-radius:8px;border:1px solid #2a2a4a}.custom-type-item .type-preview{width:50px;height:50px;object-fit:contain;border-radius:8px;background:#1a1a2e}.custom-type-item .type-info{flex:1;display:flex;flex-direction:column;gap:4px}.custom-type-item .type-name{color:#fff;font-weight:500}.custom-type-item .type-key{color:#666;font-size:.8rem;font-family:monospace}.custom-type-item .delete-type-btn{padding:8px 16px;background:#ff525233;color:#ff5252;border:1px solid #ff5252;border-radius:6px;cursor:pointer;font-size:.85rem;transition:all .2s}.custom-type-item .delete-type-btn:hover{background:#ff5252;color:#fff}.spritesheet-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:2000}.spritesheet-panel{background:#1a1a2e;border-radius:12px;width:90%;max-width:600px;max-height:85vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 8px 32px #0006}.spritesheet-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:#16213e;border-bottom:1px solid #2a2a4a}.spritesheet-header h2{margin:0;font-size:1.25rem;color:#fff}.spritesheet-header .close-btn{background:none;border:none;font-size:1.5rem;color:#888;cursor:pointer;padding:0;line-height:1}.spritesheet-header .close-btn:hover{color:#fff}.spritesheet-content{padding:20px;overflow-y:auto}.error-message{background:#ef444433;border:1px solid rgba(239,68,68,.5);color:#fca5a5;padding:10px 14px;border-radius:6px;margin-bottom:16px}.success-message{background:#22c55e33;border:1px solid rgba(34,197,94,.5);color:#86efac;padding:10px 14px;border-radius:6px;margin-bottom:16px}.spritesheet-form{display:flex;flex-direction:column;gap:16px}.form-row{display:flex;gap:16px}.form-row .form-group{flex:1}.form-group{display:flex;flex-direction:column;gap:6px}.form-group label{font-size:.875rem;color:#aaa}.form-group select{padding:10px 12px;border-radius:6px;border:1px solid #3a3a5a;background:#2a2a4a;color:#fff;font-size:.9rem}.form-group select:focus{outline:none;border-color:#6366f1}.file-uploads{display:flex;gap:16px}.file-upload-group{flex:1;display:flex;flex-direction:column;gap:8px}.file-upload-group label{font-size:.875rem;color:#aaa}.upload-zone{border:2px dashed #3a3a5a;border-radius:8px;padding:20px;text-align:center;cursor:pointer;transition:all .2s ease;min-height:120px;display:flex;align-items:center;justify-content:center;position:relative}.upload-zone:hover{border-color:#6366f1;background:#6366f11a}.upload-zone.has-file{border-style:solid;border-color:#22c55e;background:#22c55e1a}.upload-prompt{display:flex;flex-direction:column;align-items:center;gap:8px;color:#888}.upload-icon{font-size:2rem}.spritesheet-preview{max-width:100%;max-height:100px;object-fit:contain;image-rendering:pixelated}.json-preview{display:flex;flex-direction:column;align-items:center;gap:4px;color:#22c55e}.json-icon{font-size:2rem}.remove-file{position:absolute;top:8px;right:8px;background:#ef4444cc;border:none;color:#fff;width:24px;height:24px;border-radius:50%;cursor:pointer;font-size:1rem;line-height:1;display:flex;align-items:center;justify-content:center}.remove-file:hover{background:#ef4444}.form-hint{font-size:.8rem;color:#666;line-height:1.4}.submit-btn{padding:12px 20px;background:#6366f1;border:none;border-radius:6px;color:#fff;font-size:.95rem;font-weight:500;cursor:pointer;transition:background .2s ease}.submit-btn:hover:not(:disabled){background:#4f46e5}.submit-btn:disabled{opacity:.6;cursor:not-allowed}.uploaded-section{margin-top:24px;padding-top:20px;border-top:1px solid #2a2a4a}.uploaded-section h3{margin:0 0 16px;font-size:1rem;color:#fff}.loading-text,.no-items-text{color:#666;font-size:.9rem}.uploaded-list{display:flex;flex-direction:column;gap:8px}.uploaded-item{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:#2a2a4a;border-radius:6px}.uploaded-info{display:flex;gap:12px;align-items:center}.critter-type{font-weight:500;color:#fff}.animation-state{font-size:.85rem;color:#888;background:#3a3a5a;padding:2px 8px;border-radius:4px}.delete-btn{padding:6px 12px;background:transparent;border:1px solid rgba(239,68,68,.5);border-radius:4px;color:#ef4444;font-size:.8rem;cursor:pointer;transition:all .2s ease}.delete-btn:hover{background:#ef444433;border-color:#ef4444}.settings-toggle-btn{position:fixed;top:20px;right:20px;width:50px;height:50px;border-radius:50%;background:#1e1e1ee6;border:2px solid #9147ff;color:#fff;font-size:24px;cursor:pointer;z-index:9999;transition:all .2s ease;display:flex;align-items:center;justify-content:center;pointer-events:auto}.settings-toggle-btn:hover{background:#9147ff;transform:scale(1.1)}.settings-overlay{position:fixed;top:0;left:0;pointer-events:auto;right:0;bottom:0;background:#000c;z-index:10000;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.settings-panel{background:#1f1f23;border-radius:12px;width:90%;max-width:600px;max-height:85vh;display:flex;flex-direction:column;box-shadow:0 10px 40px #00000080;border:1px solid #3d3d3d}.settings-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid #3d3d3d}.settings-header h2{margin:0;color:#fff;font-size:20px;font-weight:600}.close-btn{background:none;border:none;color:#adadb8;font-size:28px;cursor:pointer;padding:0;line-height:1;transition:color .2s}.close-btn:hover{color:#fff}.settings-tabs{display:flex;padding:0 24px;gap:8px;border-bottom:1px solid #3d3d3d;overflow-x:auto}.tab{background:none;border:none;color:#adadb8;padding:12px 16px;cursor:pointer;font-size:14px;font-weight:500;border-bottom:2px solid transparent;transition:all .2s;white-space:nowrap}.tab:hover{color:#fff}.tab.active{color:#9147ff;border-bottom-color:#9147ff}.settings-content{flex:1;overflow-y:auto;padding:24px}.settings-section h3{color:#fff;font-size:16px;font-weight:600;margin:0 0 16px}.settings-section h3:not(:first-child){margin-top:24px}.setting-item{margin-bottom:20px}.setting-item label{display:flex;justify-content:space-between;align-items:center;color:#efeff1;font-size:14px;margin-bottom:8px}.setting-value{color:#9147ff;font-weight:600;font-family:monospace}.setting-item input[type=range]{width:100%;height:6px;border-radius:3px;background:#3d3d3d;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}.setting-item input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#9147ff;cursor:pointer;transition:transform .1s}.setting-item input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}.setting-item input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#9147ff;cursor:pointer;border:none}.setting-hint{display:block;color:#adadb8;font-size:12px;margin-top:4px}.setting-item.checkbox label{justify-content:flex-start;gap:12px;cursor:pointer}.setting-item.checkbox input[type=checkbox]{width:18px;height:18px;accent-color:#9147ff;cursor:pointer}.setting-item select{width:100%;padding:10px 12px;background:#0e0e10;border:1px solid #3d3d3d;border-radius:6px;color:#fff;font-size:14px;cursor:pointer}.setting-item select:focus{outline:none;border-color:#9147ff}.setting-row{display:flex;gap:16px}.setting-item.half{flex:1}.admin-actions{display:flex;flex-direction:column;gap:20px}.admin-action{background:#0e0e10;padding:16px;border-radius:8px;border:1px solid #3d3d3d}.admin-action h4{color:#fff;margin:0 0 12px;font-size:14px;font-weight:600}.admin-form{display:flex;gap:8px}.admin-form input[type=text]{flex:1;padding:8px 12px;background:#1f1f23;border:1px solid #3d3d3d;border-radius:4px;color:#fff;font-size:14px}.admin-form input[type=text]:focus{outline:none;border-color:#9147ff}.admin-form select{padding:8px 12px;background:#1f1f23;border:1px solid #3d3d3d;border-radius:4px;color:#fff;font-size:14px}.admin-form button{padding:8px 16px;background:#9147ff;border:none;border-radius:4px;color:#fff;font-weight:600;cursor:pointer;transition:background .2s}.admin-form button:hover{background:#772ce8}.danger-btn{width:100%;padding:10px 16px;background:#eb0400;border:none;border-radius:4px;color:#fff;font-weight:600;cursor:pointer;transition:background .2s}.danger-btn:hover{background:#bf0000}.critter-list{margin-top:12px;max-height:200px;overflow-y:auto;background:#0e0e10;border-radius:8px;border:1px solid #3d3d3d}.critter-list-item{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-bottom:1px solid #3d3d3d}.critter-list-item:last-child{border-bottom:none}.critter-info{display:flex;align-items:center;gap:8px;color:#fff}.critter-type{color:#adadb8;font-size:12px}.remove-btn{padding:4px 12px;background:transparent;border:1px solid #eb0400;border-radius:4px;color:#eb0400;font-size:12px;cursor:pointer;transition:all .2s}.remove-btn:hover{background:#eb0400;color:#fff}.empty-list{color:#adadb8;text-align:center;padding:20px;font-size:14px}.create-critter-btn{padding:10px 20px;background:linear-gradient(135deg,#9147ff,#772ce8);border:none;border-radius:6px;color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s}.create-critter-btn:hover{background:linear-gradient(135deg,#a970ff,#8c45ff);transform:translateY(-1px);box-shadow:0 4px 12px #9147ff66}.settings-footer{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;border-top:1px solid #3d3d3d;background:#18181b;border-radius:0 0 12px 12px}.reset-btn{padding:10px 16px;background:transparent;border:1px solid #3d3d3d;border-radius:4px;color:#adadb8;font-size:14px;cursor:pointer;transition:all .2s}.reset-btn:hover{border-color:#9147ff;color:#fff}.save-area{display:flex;align-items:center;gap:12px}.save-success{color:#0f0;font-size:14px}.save-error{color:#eb0400;font-size:14px}.save-btn{padding:10px 24px;background:#9147ff;border:none;border-radius:4px;color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s}.save-btn:hover:not(:disabled){background:#772ce8}.save-btn:disabled{background:#3d3d3d;color:#adadb8;cursor:not-allowed}.settings-content::-webkit-scrollbar,.critter-list::-webkit-scrollbar{width:8px}.settings-content::-webkit-scrollbar-track,.critter-list::-webkit-scrollbar-track{background:#0e0e10}.settings-content::-webkit-scrollbar-thumb,.critter-list::-webkit-scrollbar-thumb{background:#3d3d3d;border-radius:4px}.settings-content::-webkit-scrollbar-thumb:hover,.critter-list::-webkit-scrollbar-thumb:hover{background:#9147ff}.back-to-settings-btn{background:#9147ff1a;color:#9147ff;border:1px solid rgba(145,71,255,.3);padding:8px 16px;border-radius:8px;cursor:pointer;font-size:14px;font-weight:500;margin-bottom:16px;transition:all .2s}.back-to-settings-btn:hover{background:#9147ff33}.help-section h3{color:#9147ff;border-bottom:1px solid #3d3d3d;padding-bottom:8px}.help-section h3:first-of-type{margin-top:0}.help-section h4{color:#efeff1;font-size:14px;font-weight:600;margin:16px 0 8px}.help-block{background:#0e0e10;border-radius:8px;padding:16px;margin-bottom:16px;border:1px solid #3d3d3d}.help-block p{color:#d3d3d3;font-size:14px;line-height:1.6;margin:0 0 12px}.help-block p:last-child{margin-bottom:0}.help-block strong{color:#efeff1}.help-command{display:flex;align-items:center;gap:16px;padding:8px 0;border-bottom:1px solid #2d2d2d}.help-command:last-child{border-bottom:none;padding-bottom:0}.help-command code{background:#18181b;color:#9147ff;padding:4px 10px;border-radius:4px;font-family:Consolas,Monaco,monospace;font-size:13px;white-space:nowrap;min-width:140px}.help-command span{color:#adadb8;font-size:13px}.help-list{color:#d3d3d3;font-size:14px;line-height:1.8;margin:12px 0;padding-left:24px}.help-list li{margin-bottom:4px}@media (max-width: 600px){.settings-panel{width:95%;max-height:90vh}.settings-tabs{padding:0 16px}.tab{padding:10px 12px;font-size:13px}.settings-content{padding:16px}.setting-row{flex-direction:column;gap:0}.settings-footer{flex-direction:column;gap:12px}.reset-btn,.save-btn{width:100%}.help-command{flex-direction:column;align-items:flex-start;gap:4px}.help-command code{min-width:auto}}*{margin:0;padding:0;box-sizing:border-box}body{background:transparent;overflow:hidden;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}#root{width:100vw;height:100vh}