:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light;color:#213547;background-color:#fff;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.app-container{width:100vw;height:100vh;overflow:hidden;position:relative;background-color:#e5e5e5;--icon-color: #333333;transform:translateZ(0);-webkit-transform:translateZ(0)}@media(max-width:768px),(pointer:coarse){.pixel-place-animation{display:none!important}.other-cursor{transition:none!important}}body.dark-mode .app-container{--icon-color: #eeeeee}.pixels-counter{position:absolute;top:20px;left:50%;transform:translate(-50%);z-index:100;display:flex;flex-direction:column;align-items:center;gap:8px}.payment-success-message{position:absolute;top:80px;left:50%;transform:translate(-50%);z-index:100;background:#2ecc71e6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;padding:12px 20px;border-radius:12px;display:flex;align-items:center;gap:12px;font-weight:500;box-shadow:0 4px 20px #2ecc7166;animation:slideDown .3s ease-out}.payment-success-message button{background:#fff3;border:none;color:#fff;width:24px;height:24px;border-radius:50%;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;transition:background .2s}.payment-success-message button:hover{background:#ffffff4d}@keyframes slideDown{0%{opacity:0;transform:translate(-50%) translateY(-20px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.pixels-counter-inner{background:#fff3;backdrop-filter:blur(15px) saturate(180%);-webkit-backdrop-filter:blur(15px) saturate(180%);padding:10px 20px;border-radius:20px;box-shadow:0 8px 32px #1f268726,inset 0 0 0 1px #ffffff2e;border:1px solid rgba(255,255,255,.3);display:flex;align-items:center;gap:8px;font-size:18px;font-weight:600;color:#333}.pixels-counter-inner svg{opacity:.7}.pixels-counter-inner span.zero{color:#e53935}.pixels-depleted{background:#ff64644d;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:8px 16px;border-radius:12px;border:1px solid rgba(255,100,100,.4);display:flex;align-items:center;gap:8px;font-size:13px;color:#8b0000;font-weight:500}.refill-timer-inline{color:#8b0000;font-size:13px;font-weight:500}.viewport{width:100%;height:100%;position:relative;overflow:hidden;cursor:grab;background-color:#e5e5e5;touch-action:none;-webkit-overflow-scrolling:touch;overscroll-behavior:none}.viewport:active{cursor:grabbing}.canvas-wrapper{position:absolute;top:0;left:0;transform-origin:0 0;background:#fff}.canvas-wrapper-desktop{box-shadow:0 0 20px #0003}.canvas-wrapper-mobile{will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:translateZ(0);-webkit-transform:translateZ(0);box-shadow:none;contain:strict;isolation:isolate}.pixel-canvas{display:block;image-rendering:pixelated;cursor:crosshair;position:absolute;top:0;left:0;z-index:2;will-change:contents}.color-preset-wrapper{position:relative;display:inline-block}.remove-color-btn{position:absolute;top:-6px;right:-6px;width:18px;height:18px;background:#f00c;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;line-height:1;cursor:pointer;opacity:1;transition:opacity .2s,transform .2s;border:none;padding:0 0 2px;z-index:10}.remove-color-btn:hover{transform:scale(1.1);background:red}.eyedropper-btn{width:36px;height:36px;border-radius:50%;border:2px solid rgba(0,0,0,.1);background:#ffffff80;color:#333;font-size:16px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;padding:0;flex-shrink:0}.eyedropper-btn svg{display:block}.eyedropper-btn:hover,.eyedropper-btn.active{background:#fff;transform:scale(1.1);box-shadow:0 4px 8px #0000001a}.eyedropper-btn.active{background:#333;color:#fff}.pixel-place-animation{position:absolute;pointer-events:none;z-index:3;animation:pixel-pop .4s cubic-bezier(.175,.885,.32,1.275) forwards;box-sizing:border-box}@keyframes pixel-pop{0%{transform:scale(0);opacity:1}50%{transform:scale(1.5);opacity:.8}to{transform:scale(1);opacity:0}}.grid-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:3}.pixel-highlight{position:absolute;pointer-events:none;box-sizing:border-box;z-index:2;overflow:visible}.pixel-highlight svg{position:absolute;top:0;left:0}.own-cursor-name{position:absolute;top:100%;left:50%;margin-top:4px}.other-cursor{position:absolute;pointer-events:none;z-index:10;transition:left .1s ease-out,top .1s ease-out}.cursor-name{position:absolute;top:100%;left:50%;margin-top:2px;white-space:nowrap;font-size:10px;font-weight:600;text-shadow:-1px -1px 0 rgba(255,255,255,.8),1px -1px 0 rgba(255,255,255,.8),-1px 1px 0 rgba(255,255,255,.8),1px 1px 0 rgba(255,255,255,.8);transform-origin:top center;pointer-events:none}.other-cursor{position:absolute;display:flex;flex-direction:column;align-items:center;pointer-events:none}.controls-bar{position:absolute;bottom:30px;left:50%;transform:translate(-50%);background:#ffffffd9;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:12px 24px;border-radius:24px;box-shadow:0 4px 20px #00000026;display:flex;align-items:center;gap:16px;z-index:100;max-width:90vw;width:auto;border:1px solid rgba(255,255,255,.5)}.color-presets{display:flex;gap:12px;padding:12px;margin:-12px 0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;align-items:center}.color-presets::-webkit-scrollbar{display:none}.color-preset{width:36px;height:36px;border-radius:50%;border:2px solid rgba(0,0,0,.1);cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);flex-shrink:0;position:relative;padding:0;margin:0;box-sizing:border-box;appearance:none}.color-preset:hover{transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}.color-preset.selected{transform:scale(1.1);border-color:transparent;box-shadow:0 0 0 3px #333,0 4px 12px #0003}.color-picker-wrapper{display:flex;align-items:center;border-left:2px solid rgba(0,0,0,.1);padding-left:16px;margin-left:4px;gap:10px}.add-color-btn{width:36px;height:36px;border-radius:50%;border:2px dashed #ccc;background:#ffffff80;color:#666;font-size:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;padding:0 0 4px;flex-shrink:0;line-height:1}.add-color-btn:hover{border-color:#333;color:#333;transform:scale(1.1);background:#fff}.color-picker{width:42px;height:42px;border:none;border-radius:12px;cursor:pointer;padding:0;background:none;transition:transform .2s;box-sizing:border-box}.color-picker:hover{transform:scale(1.05)}.color-picker::-webkit-color-swatch-wrapper{padding:0}.color-picker::-webkit-color-swatch{border:2px solid rgba(0,0,0,.1);border-radius:12px}@media(max-width:600px){.controls-bar{position:fixed!important;left:50%!important;right:auto!important;bottom:80px!important;width:90%!important;max-width:350px!important;padding:12px!important;transform:translate(-50%)!important;gap:10px!important;flex-direction:column!important;flex-wrap:nowrap!important;overflow:visible!important;z-index:9999!important;display:flex!important;align-items:center!important;visibility:visible!important;opacity:1!important;background:#ffffff40!important;backdrop-filter:blur(20px) saturate(180%)!important;-webkit-backdrop-filter:blur(20px) saturate(180%)!important;border-radius:20px!important;box-shadow:0 8px 32px #1f268726!important;border:1px solid rgba(255,255,255,.4)!important}.color-presets{display:flex!important;flex-wrap:wrap!important;justify-content:center!important;gap:8px!important;flex:none!important;width:100%!important;min-width:unset!important;overflow:visible!important;padding:4px!important;margin:0!important;visibility:visible!important;max-height:90px;overflow-y:auto}.color-preset-wrapper{flex-shrink:0;display:flex!important;visibility:visible!important;position:relative}.color-preset{width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;display:block!important;visibility:visible!important;border-radius:10px!important;border:2px solid rgba(255,255,255,.5)!important;transition:none!important;box-shadow:0 2px 8px #00000026}.color-preset.selected{transform:scale(1.15)!important;border:2px solid #fff!important;box-shadow:0 0 0 2px #333,0 4px 12px #0000004d!important}.color-picker-wrapper{display:flex!important;justify-content:center!important;align-items:center!important;gap:10px!important;padding:6px 0 0!important;border-left:none!important;border-top:1px solid rgba(255,255,255,.3)!important;width:100%!important;flex-shrink:0}.add-color-btn{width:36px!important;height:36px!important;font-size:20px!important;border-radius:10px!important;background:#4caf50cc!important;color:#fff!important;border:1px solid rgba(255,255,255,.3)!important;box-shadow:0 2px 8px #4caf504d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.color-picker{width:40px!important;height:40px!important;border-radius:10px!important;border:2px solid rgba(255,255,255,.5)!important;padding:0!important}.color-picker::-webkit-color-swatch-wrapper{padding:2px}.color-picker::-webkit-color-swatch{border-radius:6px}.eyedropper-btn{width:36px!important;height:36px!important;padding:0!important;border-radius:10px!important;background:#ffffff4d!important;border:1px solid rgba(255,255,255,.4)!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.eyedropper-btn.active{background:#2196f3cc!important;border-color:#ffffff80!important;color:#fff!important}.remove-color-btn{width:16px!important;height:16px!important;font-size:12px!important;top:-4px!important;right:-4px!important}}@media(max-width:600px){body.dark-mode .controls-bar{background:#28282859!important;border-color:#ffffff26!important}body.dark-mode .color-preset{border-color:#ffffff4d!important}body.dark-mode .color-preset.selected{border-color:#fff!important}body.dark-mode .color-picker-wrapper{border-top-color:#ffffff26!important}body.dark-mode .color-picker{border-color:#ffffff4d!important}body.dark-mode .eyedropper-btn{background:#ffffff26!important;border-color:#ffffff40!important;color:#eee!important}body.dark-mode .add-color-btn{background:#4caf50b3!important;border-color:#fff3!important}}.info-menu-btn{position:absolute;top:20px;left:20px;width:40px;height:40px;border-radius:50%;background:#fff3;backdrop-filter:blur(15px) saturate(180%);-webkit-backdrop-filter:blur(15px) saturate(180%);border:1px solid rgba(255,255,255,.3);box-shadow:0 8px 32px #1f268726;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#333;z-index:100;transition:all .2s}.info-menu-btn:hover{background:#fff6;transform:scale(1.1)}.info-menu-btn svg{display:block;width:20px;height:20px}.info-menu{position:absolute;top:70px;left:20px;background:#ffffff40;backdrop-filter:blur(15px) saturate(180%);-webkit-backdrop-filter:blur(15px) saturate(180%);border:1px solid rgba(255,255,255,.3);border-radius:12px;box-shadow:0 8px 32px #1f268733;z-index:100;overflow:hidden;animation:fadeIn .2s ease-out}.info-menu button{display:flex;align-items:center;gap:10px;width:100%;padding:12px 16px;border:none;background:transparent;color:#333;font-size:14px;cursor:pointer;transition:background .2s;text-align:left}.info-menu button:hover{background:#fff6}.info-menu button:not(:last-child){border-bottom:1px solid rgba(0,0,0,.05)}.info-modal{background:#fffffff2;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:20px;width:90%;max-width:500px;max-height:80vh;overflow:hidden;box-shadow:0 25px 50px -12px #00000040;animation:modalPop .3s ease-out}.info-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.info-header span{display:flex;align-items:center;gap:8px;font-size:18px;font-weight:600}.info-header button{background:#fff3;border:none;color:#fff;width:28px;height:28px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}.info-header button:hover{background:#ffffff4d}.info-content{padding:20px;overflow-y:auto;max-height:60vh;color:#333}.info-content h3{margin:0 0 12px;font-size:16px;color:#667eea;display:flex;align-items:center;gap:6px}.info-content h3:not(:first-child){margin-top:20px}.info-content ul{margin:0 0 12px;padding-left:20px}.info-content li{margin-bottom:8px;line-height:1.5}.info-content p{margin:0 0 12px;line-height:1.6}body.dark-mode .info-menu-btn{background:#1e1e1e99;border-color:#ffffff1a;color:#eee}body.dark-mode .info-menu-btn:hover{background:#323232cc}body.dark-mode .info-menu{background:#1e1e1ee6;border-color:#ffffff1a}body.dark-mode .info-menu button{color:#eee}body.dark-mode .info-menu button:hover{background:#ffffff1a}body.dark-mode .info-menu button:not(:last-child){border-bottom-color:#ffffff0d}body.dark-mode .info-modal{background:#1e1e1ef2}body.dark-mode .info-content{color:#eee}body.dark-mode .info-content h3{color:#a78bfa}.admin-toggle{position:absolute;top:20px;right:20px;width:40px;height:40px;border-radius:50%;background:#fff3;backdrop-filter:blur(15px) saturate(180%);-webkit-backdrop-filter:blur(15px) saturate(180%);border:1px solid rgba(255,255,255,.3);box-shadow:0 8px 32px #1f268726;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#333;z-index:100;transition:all .2s;font-size:20px;line-height:1;padding:0 0 2px}.admin-toggle svg{display:block}.admin-toggle:hover{background:#fff6;transform:scale(1.1)}.admin-panel{position:absolute;top:70px;right:20px;width:250px;background:#ffffff40;backdrop-filter:blur(15px) saturate(180%);-webkit-backdrop-filter:blur(15px) saturate(180%);border:1px solid rgba(255,255,255,.3);border-radius:16px;box-shadow:0 8px 32px #1f268733;z-index:100;overflow:hidden}.admin-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:#0000001a;font-weight:600;color:#333}.admin-header button{background:none;border:none;font-size:20px;cursor:pointer;color:#666;padding:0;line-height:1;width:28px;height:28px;min-width:28px;min-height:28px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .2s}.admin-header button:hover{color:#333;background:#0000000d}.admin-content{padding:16px;display:flex;flex-direction:column;gap:12px}.admin-btn{background:#6496ff4d;border:1px solid rgba(100,150,255,.4);border-radius:8px;padding:10px 16px;font-size:14px;font-weight:500;color:#333;cursor:pointer;transition:all .2s}.admin-btn:hover{background:#6496ff80}.admin-input-group{display:flex;gap:8px}.admin-input-group input{flex:1;min-width:0;padding:10px 12px;border:1px solid rgba(0,0,0,.1);border-radius:8px;font-size:14px;background:#ffffff80;outline:none}.admin-input-group input:focus{border-color:#6496ff80}.add-pixels-btn{width:42px;flex-shrink:0;font-size:20px;font-weight:700;padding:8px!important}.admin-info{text-align:center;font-size:13px;color:#666;padding-top:8px;border-top:1px solid rgba(0,0,0,.1)}.admin-cosmetics{margin-top:12px;padding-top:12px;border-top:1px solid rgba(0,0,0,.1)}.admin-cosmetics-title{font-size:12px;color:#666;text-align:center;margin-bottom:8px}.admin-cosmetic-toggles{display:flex;flex-direction:column;gap:6px}.admin-cosmetic-btn{padding:8px 12px;border:1px solid rgba(0,0,0,.15);border-radius:6px;background:#ffffff80;cursor:pointer;font-size:12px;text-align:left;transition:all .15s ease}.admin-cosmetic-btn:hover{background:#64c86433}.admin-cosmetic-btn.active{background:linear-gradient(135deg,#64c8644d,#3296324d);border-color:#64c86480;color:#2a7a2a}.admin-content input[type=password]{width:100%;padding:10px 12px;border:1px solid rgba(0,0,0,.1);border-radius:8px;font-size:14px;background:#ffffff80;outline:none;box-sizing:border-box}.admin-content input[type=password]:focus{border-color:#6496ff80}.admin-content input[type=password].error{border-color:#ff6464cc;background:#ff64641a}.admin-error{text-align:center;font-size:13px;color:#c00;font-weight:500}.settings-panel{max-height:80vh;overflow-y:auto}.settings-section{padding:16px;border-bottom:1px solid rgba(0,0,0,.1)}.settings-section:last-child{border-bottom:none}.settings-row{display:flex;justify-content:space-between;align-items:center;font-size:14px;color:#333}.display-name-wrapper{display:flex;gap:6px;align-items:center}.display-name-input{width:100px;padding:6px 10px;border:1px solid rgba(0,0,0,.15);border-radius:8px;font-size:13px;background:#fff9;outline:none;transition:border-color .2s,box-shadow .2s}.display-name-input:focus{border-color:#45b7d180;box-shadow:0 0 0 3px #45b7d126}.display-name-input::placeholder{color:#999}.display-name-btn{width:28px;height:28px;border:1px solid rgba(0,0,0,.15);border-radius:8px;background:#2ecc7133;color:#27ae60;font-size:14px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,transform .1s}.display-name-btn:hover{background:#2ecc7166}.display-name-btn:active{transform:scale(.95)}.section-title{font-size:12px;font-weight:600;text-transform:uppercase;color:#666;margin-bottom:12px;letter-spacing:.5px}.admin-section{background:#00000008}.admin-section .admin-content{padding:0}.toggle-switch{position:relative;width:48px;height:26px;display:inline-block}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;cursor:pointer;inset:0;background-color:#0003;transition:.3s;border-radius:26px}.toggle-slider:before{position:absolute;content:"";height:20px;width:20px;left:3px;bottom:3px;background-color:#fff;transition:.3s;border-radius:50%;box-shadow:0 2px 4px #0003}.toggle-switch input:checked+.toggle-slider{background-color:#4ecdc4}.toggle-switch input:checked+.toggle-slider:before{transform:translate(22px)}body.dark-mode,body.dark-mode .app-container,body.dark-mode .viewport{background-color:#1a1a1a}body.dark-mode .canvas-wrapper{box-shadow:0 0 30px #00000080}body.dark-mode .controls-bar{background:#28282866;border-color:#ffffff1a}@media(max-width:600px){body.dark-mode .controls-bar{background:#1e1e1ef2!important}}body.dark-mode .color-picker-wrapper{border-left-color:#ffffff1a}body.dark-mode .pixels-counter-inner{background:#28282866;border-color:#ffffff1a;color:#eee}body.dark-mode .admin-toggle{background:#28282866;border-color:#ffffff1a}body.dark-mode .admin-panel{background:#28282899;border-color:#ffffff1a}body.dark-mode .admin-header{background:#0000004d;color:#eee}body.dark-mode .admin-header button{color:#aaa}body.dark-mode .settings-row{color:#eee}body.dark-mode .display-name-input{background:#ffffff1a;border-color:#ffffff1a;color:#eee}body.dark-mode .display-name-input::placeholder{color:#888}body.dark-mode .display-name-btn{background:#2ecc714d;border-color:#ffffff1a;color:#2ecc71}body.dark-mode .display-name-btn:hover{background:#2ecc7180}body.dark-mode .section-title{color:#aaa}body.dark-mode .admin-section{background:#0003}body.dark-mode .admin-btn{background:#6496ff4d;color:#eee}body.dark-mode .admin-content input{background:#ffffff1a;border-color:#ffffff1a;color:#eee}body.dark-mode .admin-info{color:#aaa;border-top-color:#ffffff1a}body.dark-mode .admin-cosmetics{border-top-color:#ffffff1a}body.dark-mode .admin-cosmetics-title{color:#aaa}body.dark-mode .admin-cosmetic-btn{background:#28282880;border-color:#ffffff1a;color:#ddd}body.dark-mode .admin-cosmetic-btn:hover{background:#64c86433}body.dark-mode .admin-cosmetic-btn.active{background:linear-gradient(135deg,#64c8644d,#3296324d);border-color:#64c86480;color:#6fd86f}body.dark-mode .settings-section{border-bottom-color:#ffffff1a}body.dark-mode .eyedropper-btn{background:#28282880;color:#eee;border-color:#ffffff1a}body.dark-mode .add-color-btn{background:#28282880;color:#aaa;border-color:#fff3}body.dark-mode .add-color-btn:hover{color:#fff;border-color:#fff}.buy-pixels-btn{background:#2ecc714d;border:none;border-radius:8px;padding:4px 8px;cursor:pointer;font-size:14px;margin-left:8px;transition:background .2s,transform .1s;display:flex;align-items:center;justify-content:center}.buy-pixels-btn svg{display:block}.buy-pixels-btn:hover{background:#2ecc7180;transform:scale(1.05)}.purchased-indicator{font-size:12px;color:#27ae60;font-weight:500}.buy-now-btn{background:linear-gradient(135deg,#27ae60,#2ecc71);color:#fff;border:none;padding:6px 12px;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;margin-left:8px;transition:transform .1s,box-shadow .2s}.buy-now-btn:hover{transform:scale(1.05);box-shadow:0 4px 12px #2ecc7166}.shop-overlay{position:fixed;inset:0;background:#0009;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;z-index:10000}.shop-modal{background:#fffffff2;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:20px;box-shadow:0 20px 60px #0000004d;max-width:420px;max-height:90vh;width:95%;overflow-y:auto;overflow-x:hidden}.shop-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:linear-gradient(135deg,#11998e,#38ef7d);color:#fff;font-weight:600;font-size:18px}.shop-header span{display:flex;align-items:center;gap:8px}.shop-header span svg{display:block}.shop-header button{background:#fff3;border:none;color:#fff;width:28px;height:28px;min-width:28px;min-height:28px;border-radius:50%;font-size:18px;cursor:pointer;transition:background .2s;display:flex;align-items:center;justify-content:center;padding:0;line-height:1}.shop-header button:hover{background:#ffffff4d}.shop-content{padding:16px;overflow-x:hidden}.shop-description{text-align:center;color:#666;margin-bottom:20px;font-size:14px}.shop-packages{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding-top:8px}.package-btn{position:relative;display:flex;flex-direction:column;align-items:center;padding:16px 8px 12px;border:2px solid #e0e0e0;border-radius:12px;background:#fff;cursor:pointer;transition:all .2s;min-width:0;overflow:visible}.package-btn:last-child:nth-child(odd){grid-column:span 2}.package-btn:hover{border-color:#667eea;transform:translateY(-2px);box-shadow:0 8px 20px #667eea33}.package-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.package-btn.popular{border-color:#27ae60;background:linear-gradient(135deg,#2ecc711a,#27ae600d)}.package-btn.best-value{border-color:#f39c12;background:linear-gradient(135deg,#f39c121a,#f1c40f0d)}.package-btn.mega{border-color:#e74c3c;background:linear-gradient(135deg,#e74c3c26,#c0392b0d);box-shadow:0 0 20px #e74c3c33}.package-btn.mega:hover{box-shadow:0 8px 30px #e74c3c4d}.package-btn.mega .package-badge{background:linear-gradient(135deg,#e74c3c,#c0392b)}.package-badge{position:absolute;top:-10px;right:10px;background:linear-gradient(135deg,#27ae60,#2ecc71);color:#fff;font-size:10px;font-weight:600;padding:4px 10px;border-radius:10px}.package-btn.best-value .package-badge{background:linear-gradient(135deg,#f39c12,#f1c40f)}.package-pixels{font-size:16px;font-weight:700;color:#333;margin-bottom:2px}.package-price{font-size:14px;color:#667eea;font-weight:600}.package-savings{font-size:10px;color:#27ae60;margin-top:2px}.shop-loading{text-align:center;padding:16px;color:#667eea;font-weight:500}.shop-note{text-align:center;color:#888;font-size:12px;margin-top:16px;display:flex;align-items:center;justify-content:center;gap:6px}.shop-note svg{display:block}body.dark-mode .shop-modal{background:#1e1e28f2}body.dark-mode .shop-description{color:#aaa}body.dark-mode .package-btn{background:#ffffff0d;border-color:#ffffff1a}body.dark-mode .package-btn:hover{border-color:#667eea}body.dark-mode .package-pixels{color:#eee}body.dark-mode .shop-note{color:#888}body.dark-mode .purchased-indicator{color:#2ecc71}.powerups-indicator{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}.powerup-badge{background:#ffffff4d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:4px 10px;border-radius:12px;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s;border:1px solid rgba(0,0,0,.1);display:flex;align-items:center;gap:4px}.powerup-badge svg{display:block}.powerup-badge:hover{transform:scale(1.05);background:#ffffff80}.powerup-badge.active{background:#2ecc7166;border-color:#27ae60}.powerup-badge.wipe{background:#e74c3c4d;border-color:#e74c3c80}.tools-sidebar{position:absolute;left:20px;top:50%;transform:translateY(-50%);z-index:100;display:flex;align-items:center}.tools-toggle{width:40px;height:40px;min-width:40px;min-height:40px;max-width:40px;max-height:40px;border-radius:50%;background:#ffffff4d;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);border:1px solid rgba(255,255,255,.3);cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;transition:all .2s;box-shadow:0 4px 15px #0000001a;padding:0;aspect-ratio:1}.tools-toggle:hover{transform:scale(1.1);background:#ffffff80}.tools-content{background:#ffffff40;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);border:1px solid rgba(255,255,255,.3);border-radius:16px;margin-left:10px;padding:12px;box-shadow:0 8px 32px #0000001a;display:none}.tools-sidebar.open .tools-content{display:block}.tool-section{margin-bottom:12px}.tool-section:last-child{margin-bottom:0}.tool-section .section-label{font-size:10px;font-weight:600;text-transform:uppercase;color:#666;margin-bottom:8px;letter-spacing:.5px}.tool-btn{display:flex;flex-direction:column;align-items:center;width:60px;padding:8px 4px;margin-bottom:6px;border:2px solid transparent;border-radius:10px;background:#ffffff4d;cursor:pointer;transition:all .2s;font-size:10px;color:#333}.tool-btn span:first-child{font-size:18px;margin-bottom:2px;display:flex;align-items:center;justify-content:center}.tool-btn span:first-child svg{display:block}.tool-btn:hover{background:#ffffff80;transform:scale(1.05)}.tool-btn.active{border-color:#667eea;background:#667eea33}.tool-btn.locked{opacity:.5;cursor:not-allowed;position:relative}.tool-btn .lock-icon{position:absolute;top:2px;right:2px;font-size:10px}.tool-btn.powerup{background:#e74c3c33;border-color:#e74c3c4d}.tool-btn.powerup.active{border-color:#e74c3c;background:#e74c3c66}.tool-btn.effect{background:#9b59b633;border-color:#9b59b64d}.tool-btn.effect.active{border-color:#9b59b6;background:#9b59b666;box-shadow:0 0 8px #9b59b680}.pixel-preview{position:absolute;pointer-events:none;box-sizing:border-box;z-index:4;border:1px solid rgba(0,0,0,.3)}.protected-pixel-indicator{position:absolute;pointer-events:none;box-sizing:border-box;z-index:3;border:2px solid rgba(255,215,0,.6);background:#ffd7001a}.shop-tabs{display:flex;border-bottom:1px solid #eee;background:#00000008;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.shop-tabs::-webkit-scrollbar{display:none}.shop-tabs button{flex:1;min-width:70px;padding:12px 6px;background:none;border:none;cursor:pointer;font-size:11px;font-weight:600;color:#666;transition:all .2s;border-bottom:2px solid transparent;white-space:nowrap}.shop-tabs button:hover{color:#333;background:#00000008}.shop-tabs button.active{color:#667eea;border-bottom-color:#667eea}.shop-packages.powerups,.shop-packages.tools,.shop-packages.cosmetics{display:flex;flex-direction:column;gap:10px}.shop-packages.powerups .package-btn,.shop-packages.tools .package-btn,.shop-packages.cosmetics .package-btn{display:grid;grid-template-columns:40px 1fr auto;grid-template-rows:auto auto;align-items:center;text-align:left;padding:12px 14px;gap:4px 10px}.shop-packages.powerups .package-btn:last-child,.shop-packages.tools .package-btn:last-child,.shop-packages.cosmetics .package-btn:last-child{grid-column:1}.shop-packages .package-emoji{font-size:24px;grid-row:span 2;justify-self:center;display:flex;align-items:center;justify-content:center}.shop-packages .package-emoji svg{display:block}.shop-packages.powerups .package-btn .package-pixels,.shop-packages.tools .package-btn .package-pixels,.shop-packages.cosmetics .package-btn .package-pixels{font-size:14px;margin:0}.shop-packages .package-desc{font-size:11px;color:#888;grid-column:2}.shop-packages.powerups .package-btn .package-price,.shop-packages.tools .package-btn .package-price,.shop-packages.cosmetics .package-btn .package-price{grid-row:span 2;font-size:13px;font-weight:600}.package-btn.bomb{border-color:#e74c3c4d;background:linear-gradient(135deg,rgba(231,76,60,.1),transparent)}.package-btn.protected{border-color:#f1c40f66;background:linear-gradient(135deg,rgba(241,196,15,.1),transparent)}.package-btn.wipe{border-color:#9b59b666;background:linear-gradient(135deg,rgba(155,89,182,.15),transparent)}.package-btn.tool{border-color:#3498db66;background:linear-gradient(135deg,rgba(52,152,219,.1),transparent)}.package-btn.cosmetic{border-color:#9b59b666;background:linear-gradient(135deg,rgba(155,89,182,.1),transparent)}.package-btn.owned{opacity:.6;border-color:#2ecc7180;background:linear-gradient(135deg,rgba(46,204,113,.1),transparent)}.package-btn.owned .package-price{color:#27ae60}.cursor-color-picker{display:flex;align-items:center;gap:10px;padding:12px;background:#0000000d;border-radius:10px;margin-top:10px}.cursor-color-picker span{font-size:12px;color:#666}.cursor-color-picker input[type=color]{width:36px;height:36px;border:none;border-radius:8px;cursor:pointer}.cursor-color-picker button{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:8px 16px;border-radius:8px;font-size:12px;cursor:pointer;transition:transform .1s}.cursor-color-picker button:hover{transform:scale(1.05)}.confirm-modal{background:#fffffff2;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:20px;box-shadow:0 20px 60px #0000004d;max-width:350px;width:90%;overflow:hidden}.confirm-header{padding:16px 20px;background:linear-gradient(135deg,#e74c3c,#c0392b);color:#fff;font-weight:600;font-size:18px;text-align:center}.confirm-header span{display:flex;align-items:center;justify-content:center;gap:8px}.confirm-content{padding:20px;text-align:center}.confirm-content p{margin:10px 0;color:#333;display:flex;align-items:center;justify-content:center;gap:6px}.confirm-content p svg{display:block}.confirm-buttons{display:flex;gap:10px;margin-top:20px}.cancel-btn{flex:1;padding:12px;border:2px solid #ddd;border-radius:10px;background:#fff;color:#666;font-weight:500;cursor:pointer;transition:all .2s}.cancel-btn:hover{border-color:#999;color:#333}.confirm-btn{flex:1;padding:12px;border:none;border-radius:10px;background:linear-gradient(135deg,#e74c3c,#c0392b);color:#fff;font-weight:600;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:6px}.confirm-btn svg{display:block}.confirm-btn:hover{transform:scale(1.02);box-shadow:0 4px 15px #e74c3c66}.rainbow-cursor svg{animation:rainbowCursor 2s linear infinite}.rainbow-cursor svg rect{fill:red;animation:rainbowFill 2s linear infinite}@keyframes rainbowCursor{0%{filter:hue-rotate(0deg)}to{filter:hue-rotate(360deg)}}@keyframes rainbowFill{0%{fill:red}16.67%{fill:#f80}33.33%{fill:#ff0}50%{fill:#0f0}66.67%{fill:#08f}83.33%{fill:#80f}to{fill:red}}.cursor-name.rainbow-text{color:red;animation:rainbowCursor 2s linear infinite}.vip-badge{margin-right:3px}body.dark-mode .tools-toggle{background:#28282880;border-color:#ffffff1a}body.dark-mode .tools-content{background:#28282899;border-color:#ffffff1a}body.dark-mode .tool-section .section-label{color:#aaa}body.dark-mode .tool-btn{background:#ffffff1a;color:#eee}body.dark-mode .tool-btn:hover{background:#fff3}body.dark-mode .powerup-badge{background:#28282880;border-color:#ffffff1a;color:#eee}body.dark-mode .shop-tabs{background:#0003;border-bottom-color:#ffffff1a}body.dark-mode .shop-tabs button{color:#aaa}body.dark-mode .shop-tabs button:hover{color:#eee}body.dark-mode .shop-tabs button.active{color:#667eea}body.dark-mode .confirm-modal{background:#1e1e28f2}body.dark-mode .confirm-content p{color:#eee}body.dark-mode .cancel-btn{background:#ffffff1a;border-color:#fff3;color:#aaa}body.dark-mode .cursor-color-picker{background:#0003}.account-section{border-bottom:1px solid rgba(0,0,0,.1);padding-bottom:16px;margin-bottom:8px}.section-title{font-size:11px;text-transform:uppercase;color:#888;margin-bottom:10px;font-weight:600;letter-spacing:.5px}.account-info{display:flex;flex-direction:column;gap:8px}.account-email{display:flex;align-items:center;gap:6px;font-size:13px;color:#333;padding:8px;background:#2ecc711a;border-radius:8px}.logout-btn{padding:8px;border:1px solid rgba(0,0,0,.1);background:#0000000d;border-radius:8px;color:#666;font-size:12px;cursor:pointer;transition:all .2s}.logout-btn:hover{background:#e74c3c1a;border-color:#e74c3c4d;color:#e74c3c}.guest-info{display:flex;flex-direction:column;gap:8px}.guest-label{font-size:13px;color:#666;padding:8px;background:#0000000d;border-radius:8px;text-align:center}.guest-hint{font-size:11px;color:#888;text-align:center;margin:0}.login-btn,.register-btn{padding:10px;border:none;border-radius:8px;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s}.login-btn{background:#0000000d;color:#333;border:1px solid rgba(0,0,0,.1)}.login-btn:hover{background:#0000001a}.register-btn{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.register-btn:hover{transform:scale(1.02);box-shadow:0 4px 15px #667eea66}.auth-modal{background:#fffffff2;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:20px;width:90%;max-width:360px;overflow:hidden;box-shadow:0 20px 60px #0000004d;animation:modalSlideIn .3s ease-out}.auth-header{padding:16px 20px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:16px}.auth-header button,.auth-header .close-btn{background:#fff3;border:none;color:#fff;width:28px;height:28px;min-width:28px;min-height:28px;border-radius:50%;cursor:pointer;font-size:18px;transition:background .2s;display:flex;align-items:center;justify-content:center;padding:0;line-height:1}.auth-header button:hover,.auth-header .close-btn:hover{background:#ffffff4d}.auth-content{padding:20px;display:flex;flex-direction:column;gap:16px}.auth-notice{display:flex;align-items:center;gap:10px;padding:12px;background:#667eea1a;border-radius:10px;font-size:12px;color:#555;line-height:1.4}.auth-field{display:flex;flex-direction:column;gap:6px}.auth-field label{font-size:12px;color:#666;font-weight:500}.auth-field input{padding:12px 14px;border:1px solid rgba(0,0,0,.1);border-radius:10px;font-size:14px;transition:all .2s;background:#00000005}.auth-field input:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.password-input-wrapper{position:relative;display:flex;align-items:center}.password-input-wrapper input{width:100%;padding-right:45px}.toggle-password-btn{position:absolute;right:10px;background:none;border:none;cursor:pointer;font-size:16px;padding:4px;opacity:.6;transition:opacity .2s}.toggle-password-btn:hover{opacity:1}.auth-error{background:#e74c3c1a;color:#e74c3c;padding:10px 12px;border-radius:8px;font-size:13px;text-align:center}.auth-success{background:#2ecc711a;color:#27ae60;padding:10px 12px;border-radius:8px;font-size:13px;text-align:center}.auth-submit-btn{padding:14px;border:none;border-radius:10px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-size:15px;font-weight:600;cursor:pointer;transition:all .2s}.auth-submit-btn:hover:not(:disabled){transform:scale(1.02);box-shadow:0 4px 15px #667eea66}.auth-submit-btn:disabled{opacity:.7;cursor:not-allowed}.auth-divider{display:flex;align-items:center;text-align:center;margin:8px 0}.auth-divider:before,.auth-divider:after{content:"";flex:1;border-bottom:1px solid #ddd}.auth-divider span{padding:0 12px;color:#888;font-size:12px;text-transform:uppercase}body.dark-mode .auth-divider:before,body.dark-mode .auth-divider:after{border-color:#444}body.dark-mode .auth-divider span{color:#666}.google-signin-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:12px;border:1px solid #ddd;border-radius:10px;background:#fff;color:#333;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}.google-signin-btn:hover:not(:disabled){background:#f5f5f5;box-shadow:0 2px 8px #0000001a}.google-signin-btn:disabled{opacity:.7;cursor:not-allowed}body.dark-mode .google-signin-btn{background:#2a2a3a;border-color:#444;color:#eee}body.dark-mode .google-signin-btn:hover:not(:disabled){background:#3a3a4a}.auth-switch{text-align:center;font-size:13px;color:#666;display:flex;flex-direction:column;gap:8px}.auth-switch span{display:block}.auth-switch button{background:none;border:none;color:#667eea;font-weight:500;cursor:pointer;padding:0;font-size:13px}.auth-switch button:hover{text-decoration:underline}body.dark-mode .auth-modal{background:#1e1e28f2}body.dark-mode .auth-field label{color:#aaa}body.dark-mode .auth-field input{background:#ffffff0d;border-color:#ffffff1a;color:#eee}body.dark-mode .auth-notice{background:#667eea33;color:#ccc}body.dark-mode .auth-switch{color:#aaa}body.dark-mode .account-section{border-bottom-color:#ffffff1a}body.dark-mode .account-email{background:#2ecc7133;color:#eee}body.dark-mode .guest-label{background:#ffffff0d;color:#aaa}body.dark-mode .login-btn{background:#ffffff0d;border-color:#ffffff1a;color:#ccc}body.dark-mode .logout-btn{background:#ffffff0d;border-color:#ffffff1a;color:#aaa}body.dark-mode .cursor-color-picker span{color:#aaa}@media(max-width:768px){.tools-sidebar{left:10px;top:120px;bottom:auto;transform:none;z-index:90}.tools-toggle{width:36px;height:36px;min-width:36px;min-height:36px;max-width:36px;max-height:36px;font-size:16px}.tools-content{position:absolute;top:45px;bottom:auto;left:0;max-height:50vh;overflow-y:auto}.tool-btn{width:50px;padding:6px 3px;font-size:10px}.info-menu-btn{top:10px;left:10px;width:36px;height:36px;z-index:200}.info-dropdown{left:10px;top:50px;max-width:calc(100vw - 20px);z-index:200}.info-content{max-height:60vh;padding:16px}.settings-btn{top:10px;right:10px;width:36px;height:36px;z-index:200}.settings-panel{right:10px;top:50px;max-width:calc(100vw - 20px);max-height:70vh;z-index:200}.shop-btn{top:10px;right:55px;width:36px;height:36px;padding:0;z-index:200}.shop-btn span{display:none}.shop-modal{width:95%;max-width:none;max-height:85vh;margin:10px}.shop-tabs button{padding:8px 10px;font-size:12px}.package-btn{padding:12px}.package-emoji{font-size:20px}.pixel-counter{top:10px;right:100px;padding:6px 10px;font-size:12px}.cursor-position{display:none}.controls-bar{z-index:80}}@media(max-width:400px){.controls-bar{padding:8px}.color-preset{width:24px;height:24px}.color-picker,.eyedropper-btn{width:28px;height:28px}.shop-tabs button{padding:6px 8px;font-size:11px}}