.cs-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 65%,#0f1a2e,#060a10);z-index:50;overflow:hidden}.cs-backdrop--exit{animation:cs-fade-out .8s ease forwards}@keyframes cs-fade-out{to{opacity:0;transform:scale(1.03)}}.cs-particles{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.cs-particle{position:absolute;width:calc(2px + var(--i, 0) * .8px);height:calc(2px + var(--i, 0) * .8px);border-radius:50%;background:#6366f159;left:calc(var(--i, 0) * 5.2%);animation:cs-float calc(7s + var(--i, 0) * .5s) ease-in-out infinite alternate;animation-delay:calc(var(--i, 0) * -.35s)}@keyframes cs-float{0%{transform:translateY(100vh);opacity:0}10%{opacity:.8}90%{opacity:.3}to{transform:translateY(-10vh);opacity:0}}.cs-panel{position:relative;width:min(840px,96vw);max-height:94vh;padding:24px 32px;border-radius:20px;background:#0a0e1af0;backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);border:1px solid rgba(99,102,241,.22);box-shadow:0 8px 60px #000000b3,0 0 80px #6366f10d;display:flex;flex-direction:column;align-items:center;gap:16px;animation:cs-panel-in .5s cubic-bezier(.34,1.56,.64,1) both;overflow:hidden}.cs-panel--exit{animation:cs-panel-out .5s ease forwards}@keyframes cs-panel-in{0%{opacity:0;transform:translateY(28px) scale(.95)}}@keyframes cs-panel-out{to{opacity:0;transform:translateY(-16px) scale(.97)}}.cs-title{display:flex;align-items:center;gap:12px}.cs-title__icon{font-size:20px;filter:drop-shadow(0 0 10px rgba(99,102,241,.9))}.cs-title__text{font-family:"Press Start 2P",monospace;font-size:clamp(10px,2.2vw,14px);color:#e2e8f0;letter-spacing:2px;text-shadow:0 0 24px rgba(99,102,241,.5)}.cs-gender-pills{display:flex;gap:10px}.cs-pill{padding:8px 24px;border-radius:999px;border:1px solid rgba(99,102,241,.2);background:transparent;color:#64748b;font-family:"Press Start 2P",monospace;font-size:8px;cursor:pointer;transition:all .2s ease;letter-spacing:.5px}.cs-pill:hover{color:#94a3b8;border-color:#6366f166}.cs-pill--active{color:#f8fafc!important;font-weight:700}.cs-pill--male.cs-pill--active{background:#60a5fa24;border-color:#60a5fa;box-shadow:0 0 18px #60a5fa38}.cs-pill--female.cs-pill--active{background:#f472b624;border-color:#f472b6;box-shadow:0 0 18px #f472b638}.cs-creator-workspace{display:flex;width:100%;gap:32px;margin:10px 0;overflow:hidden;align-items:stretch}@media (max-width: 680px){.cs-creator-workspace{flex-direction:column;overflow-y:auto;max-height:50vh}}.cs-preview-container{flex:1;display:flex;align-items:center;justify-content:center;background:#0003;border-radius:16px;border:1px solid rgba(255,255,255,.03);padding:20px}.cs-preview-area{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px}.cs-preview-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-58%);width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(var(--glow-color, "99,102,241"),.18) 0%,transparent 70%);pointer-events:none;animation:cs-glow-breathe 3s ease-in-out infinite}@keyframes cs-glow-breathe{0%,to{opacity:.8;transform:translate(-50%,-58%) scale(1)}50%{opacity:1;transform:translate(-50%,-58%) scale(1.1)}}.cs-preview-canvas{image-rendering:pixelated;image-rendering:crisp-edges;position:relative;z-index:1;animation:cs-bounce 1.4s ease-in-out infinite;filter:drop-shadow(0 8px 16px rgba(0,0,0,.5))}@keyframes cs-bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.cs-preview-shadow{width:100px;height:14px;border-radius:50%;background:#00000059;filter:blur(8px);animation:cs-shadow-sync 1.4s ease-in-out infinite}@keyframes cs-shadow-sync{0%,to{transform:scaleX(1);opacity:.35}50%{transform:scaleX(.75);opacity:.2}}.cs-customization-panel{flex:1.2;display:flex;flex-direction:column;gap:16px;overflow:hidden}.cs-wizard-steps{display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid rgba(255,255,255,.05);padding-bottom:12px;gap:4px}.cs-wizard-step{font-family:"Press Start 2P",monospace;font-size:7px;color:#334155;transition:all .3s ease;white-space:nowrap}.cs-wizard-step--active{color:#a5b4fc;text-shadow:0 0 10px rgba(99,102,241,.4)}.cs-wizard-arrow{font-family:"Press Start 2P",monospace;font-size:9px;color:#1e293b;-webkit-user-select:none;user-select:none}.cs-customization-options{display:flex;flex-direction:column;gap:20px;overflow-y:auto;padding-right:8px;min-height:38vh;max-height:42vh}.cs-option-section{display:flex;flex-direction:column;gap:10px}.cs-option-label{font-family:"Press Start 2P",monospace;font-size:7px;color:#475569;letter-spacing:2px}.cs-swatch-row{display:flex;gap:12px}.cs-swatch-card{position:relative;width:64px;height:64px;border-radius:10px;border:2px solid rgba(255,255,255,.05);background:#ffffff05;cursor:pointer;padding:0;overflow:hidden;transition:all .2s ease;display:flex;align-items:center;justify-content:center;flex-shrink:0}.cs-swatch-card:hover{border-color:#6366f166;transform:translateY(-2px)}.cs-swatch-card--selected{border-color:var(--active-border, #60a5fa)!important;background:#ffffff0d;transform:scale(1.04)}.cs-swatch-canvas{image-rendering:pixelated;image-rendering:crisp-edges;width:48px;height:48px;display:block}.cs-swatch-check{position:absolute;bottom:2px;right:4px;font-size:9px;color:#10b981;font-weight:700;text-shadow:0 0 6px rgba(16,185,129,.8);line-height:1;z-index:5}.cs-hair-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:10px}.cs-hair-grid .cs-swatch-card{width:100%;height:auto;aspect-ratio:1;flex-direction:column}.cs-style-name{font-family:"Press Start 2P",monospace;font-size:5px;color:#475569;margin-top:-4px;margin-bottom:2px;text-transform:uppercase;max-width:90%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;z-index:2}.cs-swatch-card--selected .cs-style-name{color:#e2e8f0}.cs-color-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.cs-color-btn{background:#ffffff05;border:1px solid rgba(255,255,255,.05);border-radius:8px;padding:8px 6px;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;transition:all .2s ease}.cs-color-btn:hover{background:#ffffff0d;border-color:#6366f14d}.cs-color-btn--selected{border-color:var(--active-border, #60a5fa)!important;background:#ffffff0f}.cs-color-dot{width:12px;height:12px;border-radius:50%;border:1px solid rgba(255,255,255,.2);flex-shrink:0}.cs-color-text{font-family:"Press Start 2P",monospace;font-size:6px;color:#64748b}.cs-color-btn--selected .cs-color-text{color:#e2e8f0}.cs-input-group{position:relative;width:100%;display:flex;flex-direction:column;gap:8px}.cs-label{font-family:"Press Start 2P",monospace;font-size:7px;color:#475569;letter-spacing:2px}.cs-input{width:100%;padding:13px 48px 13px 16px;border-radius:10px;border:1px solid rgba(99,102,241,.2);background:#0a0e1ab3;color:#f1f5f9;font-family:"Press Start 2P",monospace;font-size:11px;letter-spacing:1px;outline:none;transition:border-color .2s,box-shadow .2s}.cs-input::placeholder{color:#1e293b}.cs-input:focus{border-color:#6366f18c;box-shadow:0 0 0 3px #6366f11a}.cs-input--error{border-color:#ef444480!important;box-shadow:0 0 0 3px #ef444414!important;animation:cs-shake .3s ease}@keyframes cs-shake{0%,to{transform:translate(0)}25%{transform:translate(-4px)}75%{transform:translate(4px)}}.cs-error{font-family:Inter,sans-serif;font-size:12px;color:#f87171}.cs-char-count{position:absolute;bottom:14px;right:14px;font-family:"Press Start 2P",monospace;font-size:7px;color:#1e293b;pointer-events:none}.cs-wizard-controls{width:100%;display:flex;gap:16px;margin-top:10px;flex-shrink:0}.cs-wizard-btn{padding:15px;border-radius:12px;font-family:"Press Start 2P",monospace;font-size:10px;letter-spacing:1.5px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;flex:1;position:relative;overflow:hidden}.cs-wizard-btn--secondary{border:1px solid rgba(255,255,255,.05);background:#ffffff05;color:#64748b;flex:.4}.cs-wizard-btn--secondary:hover{background:#ffffff0d;color:#e2e8f0}.cs-wizard-btn--primary{border:1px solid rgba(99,102,241,.3);background:linear-gradient(135deg,#4f46e5,#7c3aed);color:#fff;box-shadow:0 4px 24px #4f46e559}.cs-wizard-btn--primary:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,rgba(255,255,255,.1) 0%,transparent 60%)}.cs-wizard-btn--primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 36px #4f46e58c}.cs-wizard-btn--primary:active:not(:disabled){transform:translateY(0)}.cs-wizard-btn:disabled{opacity:.7;cursor:default}.cs-wizard-btn--entering{background:linear-gradient(135deg,#059669,#047857)!important;box-shadow:0 4px 24px #05966966!important;animation:cs-enter-pulse .7s ease-in-out infinite alternate}@keyframes cs-enter-pulse{0%{box-shadow:0 4px 20px #0596694d}to{box-shadow:0 4px 44px #05966999}}:root{--color-bg-deep: #0a0c14;--color-bg-surface: #111827;--color-bg-elevated: #1a2235;--color-border: rgba(99, 102, 241, .2);--color-border-glow: rgba(99, 102, 241, .6);--color-primary: #6366f1;--color-primary-glow: rgba(99, 102, 241, .3);--color-accent: #10b981;--color-danger: #ef4444;--color-warning: #f59e0b;--color-text-primary: #f1f5f9;--color-text-secondary: #94a3b8;--color-text-muted: #475569;--font-ui: "Inter", system-ui, sans-serif;--font-pixel: "Press Start 2P", monospace;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--transition-fast: .15s ease;--transition-normal: .25s ease}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;overflow:hidden;background-color:var(--color-bg-deep);color:var(--color-text-primary);font-family:var(--font-ui);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{width:100%;height:100%}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--color-bg-surface)}::-webkit-scrollbar-thumb{background:var(--color-primary);border-radius:3px}.glass{background:#111827b3;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--color-border)}.glass:hover{border-color:var(--color-border-glow)}@keyframes fadeIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes slideDownFade{0%{opacity:0;transform:translate(-50%,-20px)}15%{opacity:1;transform:translate(-50%)}85%{opacity:1;transform:translate(-50%)}to{opacity:0;transform:translate(-50%,-20px)}}@keyframes pulse-glow{0%,to{box-shadow:0 0 8px var(--color-primary-glow)}50%{box-shadow:0 0 20px var(--color-primary-glow),0 0 40px #6366f126}}@keyframes spin{to{transform:rotate(360deg)}}.loading-screen{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;background:var(--color-bg-deep);z-index:100}.loading-screen .logo{font-family:var(--font-pixel);font-size:clamp(16px,3vw,28px);color:var(--color-primary);text-shadow:0 0 20px var(--color-primary-glow);animation:pulse-glow 2s ease-in-out infinite;letter-spacing:2px}.loading-screen .spinner{width:40px;height:40px;border:3px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;animation:spin .8s linear infinite}.loading-screen .status{font-size:12px;color:var(--color-text-secondary);font-family:var(--font-pixel);letter-spacing:1px}.error-screen{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:var(--color-bg-deep);padding:24px}.error-screen h2{font-family:var(--font-pixel);font-size:16px;color:var(--color-danger)}.error-screen p{font-size:14px;color:var(--color-text-secondary);text-align:center;max-width:480px;line-height:1.6}.error-screen button{padding:10px 24px;background:var(--color-primary);color:#fff;border:none;border-radius:var(--radius-md);font-family:var(--font-pixel);font-size:10px;cursor:pointer;transition:opacity var(--transition-fast)}.error-screen button:hover{opacity:.85}.hud{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:10;animation:fadeIn .4s ease both}.hud__player-info{position:absolute;top:16px;left:16px;pointer-events:auto;padding:12px 16px;border-radius:var(--radius-md);min-width:180px}.hud__player-name{font-family:var(--font-pixel);font-size:9px;color:var(--color-text-primary);letter-spacing:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hud__player-color-swatch{width:10px;height:10px;border-radius:2px;display:inline-block;margin-right:8px;vertical-align:middle;box-shadow:0 0 6px currentColor}.hud__coords{font-family:var(--font-pixel);font-size:7px;color:var(--color-text-muted);margin-top:6px;letter-spacing:.5px}.hud__room-info{position:absolute;top:16px;right:16px;pointer-events:auto;padding:10px 14px;border-radius:var(--radius-md);text-align:right}.hud__room-label{font-family:var(--font-pixel);font-size:7px;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:1px}.hud__room-players{font-family:var(--font-pixel);font-size:9px;color:var(--color-accent);margin-top:4px}.hud__online-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--color-accent);margin-right:6px;animation:pulse-glow 2s ease-in-out infinite}.hud__controls{position:absolute;bottom:16px;left:50%;transform:translate(-50%);padding:8px 16px;border-radius:var(--radius-md);font-family:var(--font-pixel);font-size:7px;color:var(--color-text-muted);letter-spacing:.5px;pointer-events:auto;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px;max-width:80vw;text-align:center}.hud__key{display:inline-block;padding:2px 6px;background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:3px;margin:0 2px;color:var(--color-text-secondary)}.hud__ping{position:absolute;bottom:16px;right:16px;pointer-events:auto;padding:8px 12px;border-radius:var(--radius-md);font-family:var(--font-pixel);font-size:7px;color:var(--color-text-muted)}.hud__ping-value{color:var(--color-accent)}.hud__top-right-group{position:absolute;top:16px;right:16px;display:flex;gap:12px;align-items:stretch;pointer-events:auto}.hud__room-info{position:static!important;padding:10px 14px;border-radius:var(--radius-md);text-align:right}.hud__shop-btn{background:#111827b3;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--color-border);color:var(--color-text-primary);font-family:var(--font-pixel);font-size:8px;padding:10px 16px;border-radius:var(--radius-md);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:all var(--transition-fast)}.hud__shop-btn:hover{border-color:var(--color-border-glow);background:#6366f126;box-shadow:0 0 16px #6366f133;transform:translateY(-1px)}.hud__shop-btn:active{transform:translateY(0)}.hud__shop-icon{font-size:11px}.shop-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#060a10a6;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:90;display:flex;align-items:center;justify-content:center}.shop-modal{width:min(540px,94vw);max-height:84vh;border-radius:var(--radius-lg);padding:24px;box-shadow:0 12px 64px #000000a6,0 0 0 1px #6366f126;animation:fadeIn .3s cubic-bezier(.34,1.56,.64,1) both;display:flex;flex-direction:column}.shop-modal__header{display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid rgba(255,255,255,.05);padding-bottom:14px;margin-bottom:16px;flex-shrink:0}.shop-modal__header-left{display:flex;align-items:center;gap:16px}.shop-modal__title{font-family:var(--font-pixel);font-size:10px;color:#e2e8f0;letter-spacing:1.5px;text-shadow:0 0 16px rgba(99,102,241,.4)}.shop-modal__gold{font-family:var(--font-pixel);font-size:9px;color:var(--color-warning);text-shadow:0 0 8px rgba(245,158,11,.3);background:#f59e0b14;border:1px solid rgba(245,158,11,.2);padding:4px 8px;border-radius:var(--radius-sm)}.shop-modal__close{background:transparent;border:none;color:var(--color-text-secondary);font-size:18px;cursor:pointer;transition:color var(--transition-fast)}.shop-modal__close:hover{color:var(--color-danger)}.shop-modal__tabs{display:flex;gap:8px;margin-bottom:16px;flex-shrink:0}.shop-modal__tab{font-family:var(--font-pixel);font-size:8px;padding:8px 16px;background:transparent;border:1px solid rgba(255,255,255,.05);border-radius:var(--radius-sm);color:var(--color-text-secondary);cursor:pointer;transition:all var(--transition-fast)}.shop-modal__tab--active{background:#6366f11f;border-color:var(--color-primary);color:var(--color-text-primary);box-shadow:0 0 10px #6366f126}.shop-modal__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;overflow-y:auto;padding-right:4px;max-height:52vh}@media (max-width: 500px){.shop-modal__grid{grid-template-columns:1fr}}.shop-item{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--radius-md);background:#ffffff03;border:1px solid rgba(255,255,255,.03);transition:all var(--transition-fast)}.shop-item:hover{border-color:#6366f140;background:#ffffff05}.shop-item--equipped{border-color:var(--color-accent)!important;background:#10b9810a;box-shadow:0 0 12px #10b98126}.shop-item__preview{width:64px;height:64px;background:#00000026;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.02)}.shop-item__info{flex:1;display:flex;flex-direction:column;gap:4px}.shop-item__name{font-family:var(--font-pixel);font-size:7px;color:var(--color-text-primary);line-height:1.4}.shop-item__cost{font-family:var(--font-pixel);font-size:6px;color:var(--color-text-muted)}.shop-item:hover .shop-item__cost{color:var(--color-text-secondary)}.shop-item__action{flex-shrink:0}.shop-item__btn{font-family:var(--font-pixel);font-size:6px;padding:8px 12px;border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast);border:1px solid transparent;outline:none;min-width:72px;text-align:center}.shop-item__btn--buy{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;border-color:#f59e0b33}.shop-item__btn--buy:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 2px 10px #f59e0b59}.shop-item__btn--buy:disabled{background:#334155;border-color:transparent;color:#64748b;cursor:default}.shop-item__btn--equip{background:#6366f11a;border-color:var(--color-primary);color:#e2e8f0}.shop-item__btn--equip:hover{background:var(--color-primary);color:#fff;transform:translateY(-1px);box-shadow:0 2px 10px #6366f159}.shop-item__btn--equipped{background:var(--color-accent);color:#fff;box-shadow:0 2px 10px #10b98159}.shop-item__btn--equipped:hover{background:var(--color-danger);border-color:#ef444433;color:#fff;box-shadow:0 2px 10px #ef444459}.hud__inventory-btn{background:#111827b3;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--color-border);color:var(--color-text-primary);font-family:var(--font-pixel);font-size:8px;padding:10px 16px;border-radius:var(--radius-md);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:all var(--transition-fast)}.hud__inventory-btn:hover{border-color:var(--color-border-glow);background:#10b98126;box-shadow:0 0 16px #10b98133;transform:translateY(-1px)}.hud__inventory-btn:active{transform:translateY(0)}.hud__equipped-tool{position:absolute;bottom:60px;left:50%;transform:translate(-50%);padding:8px 16px;border-radius:var(--radius-md);font-family:var(--font-pixel);font-size:7px;display:flex;align-items:center;gap:12px;border:1px solid var(--color-primary);background:#111827d9;box-shadow:0 0 20px #6366f126;pointer-events:auto}.hud__equipped-label{color:var(--color-text-muted)}.hud__equipped-name{color:#fff;text-shadow:0 0 8px rgba(255,255,255,.4)}.hud__use-btn{background:var(--color-primary);border:1px solid rgba(255,255,255,.1);color:#fff;padding:4px 10px;font-family:var(--font-pixel);font-size:6px;border-radius:4px;cursor:pointer;transition:all var(--transition-fast)}.hud__use-btn:hover{background:var(--color-primary-hover);box-shadow:0 0 10px #6366f166;transform:scale(1.05)}.hud__use-btn:active{transform:scale(1)}.map-editor-panel{pointer-events:auto;border:1px solid rgba(0,210,211,.3)!important;box-shadow:0 4px 30px #00d2d326!important}.editor-btn-small{background:#2f3542;border:1px solid #747d8c;color:#f1f2f6;padding:6px;font-family:inherit;font-size:11px;font-weight:700;border-radius:4px;cursor:pointer;transition:all var(--transition-fast)}.editor-btn-small:hover{background:#57606f;border-color:#ced6e0}.editor-tool-select{background:#2f3542;border:1px solid #57606f;color:#ced6e0;padding:8px 6px;font-family:inherit;font-size:10px;border-radius:4px;cursor:pointer;transition:all var(--transition-fast);text-align:left}.editor-tool-select:hover{background:#3e4452;color:#fff}.editor-tool-select.active{background:#00d2d333;border:1px solid #00d2d3;color:#00d2d3;box-shadow:0 0 10px #00d2d34d;font-weight:700}