@font-face{font-family:"Press Start 2P";src:url(/fonts/PressStart2P.woff2)format("woff2");font-display:swap;font-style:normal;font-weight:400}@font-face{font-family:VT323;src:url(/fonts/VT323.woff2)format("woff2");font-display:swap;font-style:normal;font-weight:400}:root{--bg-canvas:#0a0a1a;--bg-deep:#0a0a1a;--bg-base:#1a1a2e;--bg-glow:#1a2455;--bg-elev:#16213e;--accent:#00f0ff;--accent-strong:#66f7ff;--accent-warm:#ff48b8;--accent-yellow:#fefe57;--accent-soft:#a3c9ff;--text-primary:#e0f7ff;--text-secondary:#e0f7ff80;--text-muted:#e0f7ff59;--scanline:#00000040;--vignette-edge:#0000008c;--border:#1f2638;--font-display:"Press Start 2P", monospace;--font-body:"VT323", monospace;--font-mono:"Courier New", monospace;--ease-snap:cubic-bezier(.22, 1, .36, 1);--dur-press:.1s;--dur-hover:.15s;--dur-mount:.3s;--dur-pulse:2.4s;--dur-bob:3s;--dur-nudge:14s}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-body);background:var(--bg-deep);color:var(--text-primary);-webkit-font-smoothing:antialiased;touch-action:manipulation}#root{-webkit-user-select:none;user-select:none;flex-direction:column;max-width:480px;min-height:100dvh;margin:0 auto;display:flex}.welcome{text-align:center;background:repeating-linear-gradient(transparent 0 2px, var(--scanline) 2px 3px), radial-gradient(ellipse at center, transparent 60%, var(--vignette-edge) 100%), radial-gradient(ellipse at 50% 30%, var(--bg-glow) 0%, var(--bg-deep) 70%);animation:welcome-mount var(--dur-mount) var(--ease-snap) both;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:14px;padding:32px;display:flex}.welcome-title{font-family:var(--font-display);letter-spacing:2px;color:var(--accent);text-shadow:0 0 12px #00f0ff99,0 0 28px #00f0ff4d;margin-bottom:0;font-size:22px}.welcome-subtitle{font-family:var(--font-body);color:var(--text-secondary);letter-spacing:1px;text-transform:uppercase;margin-bottom:6px;font-size:16px;line-height:1.3}.welcome-stage{margin:4px 0 8px;padding:6px 24px 14px;position:relative}.welcome-mascots{align-items:flex-end;gap:18px;display:flex}.welcome-mascot{animation:welcome-bob var(--dur-bob) ease-in-out infinite;filter:drop-shadow(0 0 8px #00f0ff40)}.welcome-mascot-canvas{image-rendering:pixelated;display:block}.welcome-stage-floor{filter:blur(3px);height:8px;animation:welcome-pulse var(--dur-pulse) ease-in-out infinite;background:radial-gradient(#00f0ff8c 0%,#00f0ff26 40%,#0000 70%);position:absolute;bottom:0;left:0;right:0}.welcome-actions{flex-direction:column;gap:12px;width:220px;margin-top:10px;display:flex}@keyframes welcome-mount{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes welcome-bob{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}@keyframes welcome-pulse{0%,to{opacity:.85;transform:scaleX(1)}50%{opacity:1;transform:scaleX(1.1)}}.btn-primary{font-family:var(--font-display);letter-spacing:1px;cursor:pointer;background:var(--accent);color:var(--bg-deep);border:1px solid var(--accent);transition:transform var(--dur-hover) var(--ease-snap), box-shadow var(--dur-hover) ease, filter var(--dur-hover) ease;border-radius:999px;min-width:200px;padding:12px 24px;font-size:11px;position:relative;overflow:hidden;box-shadow:0 0 12px #00f0ff80}.btn-primary:active{transform:scale(.96);box-shadow:0 0 4px #00f0ff4d}.btn-primary:active:after{content:"";border-radius:inherit;pointer-events:none;background:#ffffff8c;animation:.5s ease-out btn-ripple;position:absolute;inset:0}.btn-primary:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}.btn-secondary{font-family:var(--font-display);letter-spacing:1px;cursor:pointer;color:var(--accent);border:1px solid var(--accent);transition:transform var(--dur-hover) var(--ease-snap), background var(--dur-hover) ease;background:0 0;border-radius:999px;min-width:200px;padding:12px 24px;font-size:11px}.btn-secondary:active{transform:scale(.96)}.btn-secondary:disabled{opacity:.3;cursor:not-allowed}.btn-secondary:disabled:active{animation:.35s ease-in-out btn-shake}.welcome-actions .btn-primary:not(:disabled){animation:btn-nudge var(--dur-nudge) ease-in-out infinite}.welcome-actions .btn-primary:active,.welcome-actions .btn-primary:hover{animation:none}@media (hover:hover) and (pointer:fine){.btn-primary:hover{transform:translateY(-2px)scale(1.03);box-shadow:0 0 22px #00f0ffd9}.btn-secondary:not(:disabled):hover{background:#00f0ff14}}@keyframes btn-ripple{0%{opacity:1;transform:scale(0)}to{opacity:0;transform:scale(2.5)}}@keyframes btn-shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-3px)}40%,80%{transform:translate(3px)}}@keyframes btn-nudge{0%,90%,to{transform:scale(1);box-shadow:0 0 12px #00f0ff80}93%{transform:scale(1.04);box-shadow:0 0 24px #00f0ffd9}96%{transform:scale(1);box-shadow:0 0 12px #00f0ff80}}.top-bar{background:repeating-linear-gradient(transparent 0 2px, #00000038 2px 3px), var(--bg-elev);border-bottom:1px solid #00f0ff33;justify-content:space-between;align-items:center;gap:8px;padding:10px 14px;display:flex;position:relative}.top-bar:after{content:"";pointer-events:none;background:linear-gradient(90deg,#0000,#00f0ff99,#0000);height:1px;position:absolute;bottom:-1px;left:0;right:0}.editor-top-bar{grid-template-columns:1fr auto 1fr;display:grid}.top-bar-name-wrap{justify-self:center;align-items:center;gap:6px;display:inline-flex}.top-bar-title{font-family:var(--font-display);letter-spacing:1px;color:var(--accent);text-shadow:0 0 8px #00f0ff80;text-transform:uppercase;font-size:12px}.btn-small{min-width:auto;padding:6px 14px;font-size:13px}.mob-list{flex-direction:column;gap:8px;padding:12px;display:flex}.mob-card{background:var(--bg-elev);color:var(--text-primary);opacity:0;animation:mob-card-enter var(--dur-mount) var(--ease-snap) both;animation-delay:calc(var(--i,0) * 60ms);transition:transform var(--dur-hover) var(--ease-snap), border-color var(--dur-hover) ease, box-shadow var(--dur-hover) ease;border:1px solid #00f0ff2e;border-radius:8px;align-items:center;gap:14px;padding:12px;text-decoration:none;display:flex}.mob-card:active{transform:scale(.98)}.mob-card-thumbnail{background-color:var(--bg-deep);width:52px;height:52px;image-rendering:pixelated;border:1px solid #00f0ff40;border-radius:4px;flex-shrink:0;display:block;box-shadow:inset 0 0 8px #00f0ff26}.mob-card-info{flex:1;min-width:0}.mob-card-name{font-family:var(--font-body);letter-spacing:1px;color:var(--text-primary);margin-bottom:4px;font-size:18px;line-height:1}.mob-card-meta{font-family:var(--font-body);letter-spacing:1px;color:var(--text-secondary);text-transform:uppercase;font-size:13px}.mob-card-delete{color:var(--text-muted);cursor:pointer;transition:color var(--dur-press) ease, transform var(--dur-press) ease;background:0 0;border:none;padding:8px;font-size:16px}.mob-card-delete:active{color:var(--accent-warm);transform:scale(.85)}.editor-page{background:repeating-linear-gradient(transparent 0 2px, var(--scanline) 2px 3px), var(--bg-deep);min-height:100dvh;padding-bottom:env(safe-area-inset-bottom);overscroll-behavior:none;flex-direction:column;display:flex}.editor-body{flex:1;padding:12px}.top-bar-back{cursor:pointer;color:#e0f7ffb3;transition:transform var(--dur-press) var(--ease-snap);font-family:var(--font-body);background:0 0;border:none;justify-self:start;align-items:center;gap:8px;padding:4px 6px;display:flex}.top-bar-back-chev{font-family:var(--font-display);color:var(--accent);text-shadow:0 0 10px #00f0ff99;font-size:22px;line-height:1}.top-bar-back-word{letter-spacing:1px;text-transform:uppercase;font-size:14px}.top-bar-back:active{transform:translate(-2px)}.top-bar-name{font-family:var(--font-body);letter-spacing:1px;color:var(--text-primary);cursor:pointer;font-size:18px}.top-bar-name-input{font-family:var(--font-body);letter-spacing:1px;background:var(--bg-canvas);color:var(--text-primary);border:1px solid var(--accent);text-align:center;-webkit-user-select:text;user-select:text;border-radius:4px;outline:none;width:160px;padding:2px 6px;font-size:18px}.top-bar-save-dot{background:0 0;border-radius:50%;width:6px;height:6px;transition:background .2s,box-shadow .2s;display:inline-block}.top-bar-save-dot[data-status=saving]{background:var(--accent);opacity:.5;box-shadow:0 0 4px #00f0ff80}.top-bar-save-dot[data-status=saved]{background:var(--accent-yellow);box-shadow:0 0 6px #fefe57cc}.top-bar-save-dot[data-status=error]{background:var(--accent-warm);box-shadow:0 0 8px #ff48b8cc}.top-bar-share{font-family:var(--font-display);color:var(--accent);border:1px solid var(--accent);cursor:pointer;letter-spacing:1px;text-transform:uppercase;transition:all var(--dur-hover) var(--ease-snap);background:0 0;border-radius:4px;justify-self:end;padding:6px 12px;font-size:8px;box-shadow:inset 0 0 8px #00f0ff1a}.top-bar-share:active{background:var(--accent);color:var(--bg-deep);transform:scale(.94)}.top-bar-share[data-state=copied],.top-bar-share[data-state=shared]{background:var(--accent-yellow);color:var(--bg-deep);border-color:var(--accent-yellow)}.top-bar-share[data-state=error]{background:var(--accent-warm);color:var(--bg-deep);border-color:var(--accent-warm)}.import-dialog-backdrop{z-index:100;background:#000000b3;justify-content:center;align-items:center;padding:16px;animation:.2s ease-out both dialog-fade;display:flex;position:fixed;inset:0}.import-dialog{background:var(--bg-elev);width:100%;max-width:360px;animation:dialog-pop var(--dur-mount) var(--ease-snap) both;border:1px solid #00f0ff66;border-radius:12px;flex-direction:column;gap:14px;padding:18px;display:flex;position:relative;overflow:hidden;box-shadow:0 0 0 1px #0006,0 8px 32px #0009,0 0 30px #00f0ff26}.import-dialog:before{content:"";border-radius:inherit;pointer-events:none;background:repeating-linear-gradient(#0000 0 2px,#0000002e 2px 3px);position:absolute;inset:0}.import-dialog>*{z-index:1;position:relative}.import-dialog-title{font-family:var(--font-display);color:var(--accent);text-shadow:0 0 10px #00f0ff80;letter-spacing:1px;text-transform:uppercase;font-size:12px}.import-dialog-warning{font-family:var(--font-body);letter-spacing:.5px;color:#e0f7ffe6;margin:0;font-size:17px;line-height:1.4}.import-dialog-preview-row{align-items:center;gap:12px;display:flex}.import-dialog-canvas{background-color:var(--bg-deep);width:80px;height:80px;image-rendering:pixelated;background-image:linear-gradient(45deg,#181828 25%,#0000 25% 75%,#181828 75%),linear-gradient(45deg,#181828 25%,#0000 25% 75%,#181828 75%);background-position:0 0,4px 4px;background-size:8px 8px;border:1px solid #00f0ff59;border-radius:4px;flex-shrink:0;box-shadow:inset 0 0 8px #00f0ff2e}.import-dialog-info{flex:1;min-width:0}.import-dialog-name{font-family:var(--font-body);letter-spacing:1px;color:var(--text-primary);word-break:break-word;margin-bottom:4px;font-size:18px}.import-dialog-stats{font-family:var(--font-body);letter-spacing:1px;color:var(--text-secondary);text-transform:uppercase;font-size:14px}.import-dialog-actions{justify-content:flex-end;gap:8px;margin-top:4px;display:flex}.import-dialog-btn{font-family:var(--font-display);cursor:pointer;letter-spacing:1px;text-transform:uppercase;transition:all var(--dur-hover) var(--ease-snap);border-radius:4px;padding:8px 14px;font-size:9px}.import-dialog-btn-cancel{color:var(--text-secondary);background:0 0;border:1px solid #e0f7ff4d}.import-dialog-btn-cancel:active{background:#ffffff0a;transform:scale(.96)}.import-dialog-btn-confirm{background:var(--accent);color:var(--bg-deep);border:1px solid var(--accent);box-shadow:0 0 12px #00f0ff80}.import-dialog-btn-confirm:active{transform:scale(.96);box-shadow:0 0 4px #00f0ff4d}.import-dialog-error{background:var(--accent-warm);color:var(--bg-deep);font-family:var(--font-body);letter-spacing:1px;border-radius:4px;margin:12px;padding:10px 14px;font-size:14px}@keyframes dialog-fade{0%{opacity:0}to{opacity:1}}@keyframes dialog-pop{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}.pixel-canvas-container{aspect-ratio:1;width:100%}.pixel-canvas{background-color:var(--bg-canvas);width:100%;height:100%;image-rendering:pixelated;touch-action:none;cursor:crosshair;background-image:linear-gradient(45deg,#181828 25%,#0000 25% 75%,#181828 75%),linear-gradient(45deg,#181828 25%,#0000 25% 75%,#181828 75%);background-position:0 0,6px 6px;background-size:12px 12px;border:2px solid #00f0ff66;border-radius:4px;box-shadow:inset 0 0 18px #00f0ff1a,0 0 14px #00f0ff26}.pixel-canvas.drag-mode{cursor:grab}.pixel-canvas.dragging{cursor:grabbing}.tool-toggle{border:1px solid #00f0ff4d;border-radius:6px;margin:8px 0;display:flex;overflow:hidden}.tool-toggle-btn{background:var(--bg-deep);color:#00f0ff8c;font-family:var(--font-display);letter-spacing:1px;cursor:pointer;transition:all var(--dur-hover) var(--ease-snap);border:none;border-right:1px solid #00f0ff26;flex:1;padding:8px 4px;font-size:9px}.tool-toggle-btn:last-child{border-right:none}.tool-toggle-btn.active{background:var(--accent);color:var(--bg-deep);box-shadow:0 0 14px #00f0ff80}.tool-toggle-btn:not(.active):active{background:#00f0ff14}@media (hover:hover) and (pointer:fine){.tool-toggle-btn:not(.active):hover{color:var(--accent);background:#00f0ff14}}.section-label{justify-content:space-between;align-items:center;gap:8px;margin-top:8px;margin-bottom:12px;display:flex}.section-label-left{font-family:var(--font-display);letter-spacing:1px;color:var(--accent);text-shadow:0 0 6px #00f0ff80;text-transform:uppercase;align-items:center;gap:6px;font-size:9px;display:flex}.section-label-left:before{content:"";background:var(--accent);width:6px;height:6px;display:inline-block;box-shadow:0 0 6px #00f0ffcc}.section-label-hint{font-family:var(--font-body);letter-spacing:1px;color:var(--text-muted);text-transform:uppercase;font-size:12px}.palette-bar{flex:1;min-width:0}.palette-grid{grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;display:grid}.palette-swatch{aspect-ratio:1;cursor:pointer;width:100%;transition:transform var(--dur-hover) var(--ease-snap), box-shadow var(--dur-hover) ease;border-radius:4px;padding:0;position:relative}.palette-swatch.filled{z-index:1;border:1px solid #ffffff26}.palette-swatch.empty{background:0 0;border:1px dashed #00f0ff4d}.palette-swatch.empty:active{background:#00f0ff14}.palette-swatch.selected{box-shadow:0 0 0 2px var(--accent), 0 0 16px #00f0ffcc;z-index:2}.palette-swatch-wrapper{aspect-ratio:1;position:relative}.palette-picker-inline{opacity:0;cursor:pointer;width:100%;height:100%;position:absolute;inset:0}.palette-preview-row{align-items:flex-start;gap:10px;margin:8px 0;display:flex}.animation-preview{background-color:var(--bg-deep);background-image:linear-gradient(45deg,#181828 25%,#0000 25% 75%,#181828 75%),linear-gradient(45deg,#181828 25%,#0000 25% 75%,#181828 75%);background-position:0 0,4px 4px;background-size:8px 8px;border:1px solid #00f0ff4d;border-radius:4px;flex-shrink:0;width:96px;height:96px;overflow:hidden;box-shadow:inset 0 0 8px #00f0ff26}.animation-preview-canvas{width:100%;height:100%;image-rendering:pixelated;display:block}.frame-strip{margin:8px 0}.frame-strip-scroll{-webkit-overflow-scrolling:touch;scrollbar-width:none;background:#00f0ff08;border:1px solid #00f0ff1a;border-radius:6px;align-items:center;gap:6px;padding:8px;display:flex;overflow-x:auto;box-shadow:inset 0 1px 3px #00000080}.frame-strip-scroll::-webkit-scrollbar{display:none}.frame-thumb{transition:transform var(--dur-hover) var(--ease-snap);flex-shrink:0;position:relative}.frame-thumb-btn{background:var(--bg-deep);cursor:pointer;border:2px solid #00f0ff40;border-radius:4px;padding:0;display:block}.frame-thumb.selected .frame-thumb-btn{border-color:var(--accent);box-shadow:0 0 16px #00f0ffa6}.frame-thumb-canvas{background:var(--bg-deep);image-rendering:pixelated;border-radius:3px;display:block}.frame-add-btn{color:#00f0ff99;min-width:48px;height:48px;font-family:var(--font-display);cursor:pointer;background:0 0;border:1px dashed #00f0ff59;border-radius:4px;flex-shrink:0;font-size:14px}.frame-add-btn:active{background:#00f0ff14}button,a,canvas{-webkit-tap-highlight-color:transparent}.my-mobs-page{background:repeating-linear-gradient(transparent 0 2px, var(--scanline) 2px 3px), var(--bg-deep);flex-direction:column;flex:1;display:flex}.my-mobs-empty{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:16px;padding:32px 16px;display:flex}.my-mobs-empty-msg{font-family:var(--font-body);letter-spacing:1px;text-transform:uppercase;color:var(--text-secondary);margin:0;font-size:22px}.my-mobs-empty-hint{font-family:var(--font-body);letter-spacing:1px;text-transform:uppercase;color:#00f0ffb3;align-items:center;gap:12px;margin:0;font-size:16px;display:flex}.my-mobs-empty-hint strong{color:var(--accent);text-shadow:0 0 8px #00f0ff99;font-weight:400}.my-mobs-empty-chev{font-family:var(--font-display);color:var(--accent);text-shadow:0 0 12px #00f0ffd9,0 0 22px #00f0ff80;font-size:26px;line-height:1;animation:1.4s ease-in-out infinite empty-chev;display:inline-block}.top-bar-new{justify-self:end}@media (hover:hover) and (pointer:fine){.top-bar-back:hover .top-bar-back-chev{text-shadow:0 0 16px #00f0ff}.top-bar-back:hover{transform:translate(-2px)}.mob-card:hover{border-color:#00f0ff8c;box-shadow:0 0 18px #00f0ff2e}.mob-card-delete:hover{color:var(--accent-warm)}}@keyframes mob-card-enter{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes empty-chev{0%,to{text-shadow:0 0 12px #00f0ffd9,0 0 22px #00f0ff80;transform:translate(0)}50%{text-shadow:0 0 18px #00f0ff,0 0 30px #00f0ffb3;transform:translate(8px)}}.context-menu{background:var(--bg-elev);border:1px solid var(--border);z-index:100;border-radius:6px;min-width:140px;padding:4px 0;position:fixed;box-shadow:0 4px 12px #0006}.context-menu-item{width:100%;color:var(--text-primary);font-family:var(--font-mono);text-align:left;cursor:pointer;background:0 0;border:none;padding:10px 16px;font-size:13px;display:block}.context-menu-item:active{background:var(--accent)}.context-menu-color-item{position:relative}.context-menu-color-input{opacity:0;cursor:pointer;border:none;width:100%;height:100%;padding:0;position:absolute;inset:0}.app-footer{text-align:center;padding:16px 12px calc(16px + env(safe-area-inset-bottom));font-size:14px}.app-footer a{color:var(--text-secondary);border-bottom:1px dotted var(--text-secondary);text-decoration:none}@media (prefers-reduced-motion:reduce){.welcome,.welcome-mascot,.welcome-stage-floor,.welcome-actions .btn-primary,.mob-card,.my-mobs-empty-chev,.top-bar-save-dot{animation:none!important}.btn-primary,.btn-secondary,.mob-card,.frame-thumb,.top-bar-back,.top-bar-share,.tool-toggle-btn,.palette-swatch,.import-dialog,.import-dialog-backdrop,.import-dialog-btn{transition:none!important}}