*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background:#080e18;color:#fff;overflow:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{width:100vw;height:100vh}button{font-family:inherit;cursor:pointer}button:focus{outline:2px solid rgba(100,150,200,.5);outline-offset:2px}button:hover{cursor:pointer}select:focus,input:focus{outline:2px solid rgba(100,150,200,.5);outline-offset:1px}input::placeholder{color:#c8c8c880}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:#0000004d;border-radius:5px}::-webkit-scrollbar-thumb{background:#6496c866;border-radius:5px}::-webkit-scrollbar-thumb:hover{background:#6496c899}canvas{touch-action:none}.mobile-game-container{touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.story-modal-overlay{position:fixed;inset:0;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:10000;padding:20px;animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.story-modal-content{background:linear-gradient(135deg,#1a1a2e,#16213e);border:2px solid #0f3460;border-radius:16px;max-width:900px;width:100%;max-height:90vh;height:85vh;display:flex;flex-direction:column;box-shadow:0 15px 60px #000000b3,0 0 40px #e9456033;animation:slideUp .3s ease}@keyframes slideUp{0%{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}.story-modal-header{padding:28px 28px 20px;border-bottom:3px solid rgba(233,69,96,.3);display:flex;justify-content:space-between;align-items:center;background:linear-gradient(180deg,rgba(233,69,96,.15) 0%,transparent 100%)}.story-modal-header h1{margin:0;font-size:32px;font-weight:900;color:#e94560;text-shadow:0 0 20px rgba(233,69,96,.6),0 2px 4px rgba(0,0,0,.5);letter-spacing:.5px}.story-modal-close{background:none;border:none;color:#888;font-size:28px;cursor:pointer;padding:4px 8px;line-height:1;transition:color .2s,transform .2s}.story-modal-close:hover{color:#e94560;transform:scale(1.2)}.story-modal-tabs{display:flex;padding:0 28px;background:linear-gradient(180deg,#0f346066,#0f346040);border-bottom:3px solid rgba(15,52,96,.5);gap:4px}.story-tab{background:none;border:none;color:#999;padding:14px 24px;cursor:pointer;font-size:15px;font-weight:700;transition:all .3s;border-bottom:4px solid transparent;margin-bottom:-3px;position:relative;letter-spacing:.3px}.story-tab:hover{color:#ddd;background:#e9456026}.story-tab.active{color:#e94560;border-bottom-color:#e94560;background:linear-gradient(180deg,#e9456033,#e945601a);text-shadow:0 0 10px rgba(233,69,96,.5)}.story-modal-body{flex:1;overflow-y:auto;padding:28px;min-height:0}.story-tab-content{color:#ddd;line-height:1.6}.story-tab-content h2{color:#e94560;font-size:24px;margin:0 0 20px}.story-tab-content h3{color:#4ecdc4;font-size:18px;margin:24px 0 12px}.story-tab-content p{margin:12px 0;font-size:15px}.story-intro{background:linear-gradient(135deg,#4ecdc40d,#e945600d);padding:24px;border-radius:12px;border:2px solid rgba(78,205,196,.2);box-shadow:0 4px 16px #0000004d}.story-intro p{text-align:left;font-size:16px;line-height:1.9;color:#e0e0e0;font-weight:400}.controls-list{display:flex;flex-direction:column;gap:14px}.control-item{display:flex;align-items:center;gap:18px;padding:16px;background:linear-gradient(135deg,#4ecdc414,#4ecdc41f);border-left:4px solid #4ecdc4;border-radius:8px;box-shadow:0 2px 8px #0003;transition:all .3s}.control-item:hover{background:linear-gradient(135deg,#4ecdc426,#4ecdc433);transform:translate(4px);box-shadow:0 4px 12px #4ecdc44d}.control-key{background:linear-gradient(135deg,#0f3460,#16213e);color:#4ecdc4;padding:10px 16px;border-radius:8px;font-weight:700;font-size:14px;min-width:150px;text-align:center;border:2px solid #4ecdc4;box-shadow:0 2px 8px #4ecdc44d,inset 0 1px #ffffff1a;text-shadow:0 0 8px rgba(78,205,196,.5)}.control-description{flex:1;color:#e0e0e0;font-size:15px;line-height:1.5}.elements-section{margin-bottom:36px}.elements-list{display:flex;flex-direction:column;gap:14px}.element-item{display:flex;gap:18px;align-items:center;padding:18px;background:linear-gradient(135deg,#e9456014,#e945601f);border:2px solid rgba(233,69,96,.25);border-radius:12px;transition:all .3s;box-shadow:0 2px 8px #0003}.element-item:hover{background:linear-gradient(135deg,#e9456026,#e9456033);border-color:#e9456080;transform:translate(6px);box-shadow:0 4px 16px #e945604d}.element-icon{width:52px;height:52px;display:flex;align-items:center;justify-content:center;background:#0000004d;border-radius:8px;border:1px solid rgba(255,255,255,.1);padding:0;overflow:hidden}.element-icon canvas{display:block;margin:auto}.element-content{flex:1}.element-name{font-weight:700;color:#e94560;margin-bottom:6px;font-size:16px;text-shadow:0 0 8px rgba(233,69,96,.4)}.element-description{color:#ccc;font-size:14px;line-height:1.6}.tips-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:14px}.tip-item{padding:18px 20px;background:linear-gradient(135deg,#4ecdc414,#4ecdc41f);border-left:4px solid #4ecdc4;border-radius:8px;font-size:15px;line-height:1.7;color:#e0e0e0;box-shadow:0 2px 8px #0003;transition:all .3s}.tip-item:hover{background:linear-gradient(135deg,#4ecdc426,#4ecdc433);transform:translate(4px);box-shadow:0 4px 12px #4ecdc44d}.story-modal-footer{padding:16px 24px;border-top:2px solid #0f3460;display:flex;justify-content:center}.story-modal-button{background:linear-gradient(135deg,#e94560,#c93550);color:#fff;border:none;padding:12px 32px;font-size:16px;font-weight:700;border-radius:6px;cursor:pointer;transition:all .3s;box-shadow:0 4px 12px #e9456066}.story-modal-button:hover{transform:translateY(-2px);box-shadow:0 6px 16px #e9456099}.story-modal-button:active{transform:translateY(0)}.story-modal-body::-webkit-scrollbar{width:8px}.story-modal-body::-webkit-scrollbar-track{background:#0f34604d;border-radius:4px}.story-modal-body::-webkit-scrollbar-thumb{background:#4ecdc4;border-radius:4px}.story-modal-body::-webkit-scrollbar-thumb:hover{background:#3db3aa}@media(max-width:768px){.story-modal-content{max-width:100%;max-height:95vh}.story-modal-header h1{font-size:22px}.story-tab{padding:10px 12px;font-size:12px}.control-item{flex-direction:column;align-items:flex-start}.control-key{min-width:auto}}.tile-preview-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:1000}.tile-preview-container{display:flex;flex-direction:column;align-items:center;transform-origin:center center;opacity:0;transform:scale(.3)}.tile-preview-container.animate{animation:bubbleIn .3s cubic-bezier(.175,.885,.32,1.275) forwards}.tile-preview-canvas{width:120px;height:120px;border-radius:16px;box-shadow:0 0 0 4px #ffffff4d,0 8px 32px #00000080,0 0 60px #64c8644d}.tile-preview-container.animate .tile-preview-canvas{animation:bubblePulse 1.5s ease-in-out infinite .3s}.tile-preview-label{margin-top:12px;padding:8px 20px;background:linear-gradient(145deg,#1e321ef2,#142314fa);color:#e8ffe8;font-size:18px;font-weight:600;border-radius:20px;box-shadow:0 4px 16px #0006,0 0 0 2px #64b46466,inset 0 1px #ffffff1a;text-shadow:0 1px 2px rgba(0,0,0,.3);letter-spacing:.5px;opacity:0;transform:translateY(10px)}.tile-preview-container.animate .tile-preview-label{animation:labelSlideIn .4s cubic-bezier(.175,.885,.32,1.275) .1s forwards}@keyframes bubbleIn{0%{transform:scale(.3);opacity:0}50%{transform:scale(1.15);opacity:1}70%{transform:scale(.95)}85%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes bubblePulse{0%,to{transform:scale(1);box-shadow:0 0 0 4px #ffffff4d,0 8px 32px #00000080,0 0 60px #64c8644d}50%{transform:scale(1.05);box-shadow:0 0 0 6px #fff6,0 12px 40px #0009,0 0 80px #64c86466}}@keyframes labelSlideIn{0%{opacity:0;transform:translateY(10px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}.canvas-editor-overlay{position:fixed;inset:0;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:10000;padding:20px;animation:canvasEditorFadeIn .2s ease}@keyframes canvasEditorFadeIn{0%{opacity:0}to{opacity:1}}.canvas-editor-modal{background:linear-gradient(135deg,#1a1a2e,#16213e);border:2px solid #0f3460;border-radius:12px;max-width:550px;width:100%;display:flex;flex-direction:column;box-shadow:0 15px 60px #000000b3,0 0 30px #4ecdc426;animation:canvasEditorSlideUp .2s ease}@keyframes canvasEditorSlideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.canvas-editor-header{padding:16px 20px;border-bottom:2px solid rgba(78,205,196,.3);display:flex;justify-content:space-between;align-items:center;background:linear-gradient(180deg,rgba(78,205,196,.1) 0%,transparent 100%)}.canvas-editor-header h2{margin:0;font-size:20px;font-weight:700;color:#4ecdc4;text-shadow:0 0 10px rgba(78,205,196,.4)}.canvas-editor-close{background:none;border:none;color:#888;font-size:24px;cursor:pointer;padding:4px 8px;line-height:1;transition:color .2s,transform .2s}.canvas-editor-close:hover{color:#e94560;transform:scale(1.2)}.canvas-editor-body{padding:20px;display:flex;flex-direction:column;align-items:center;gap:16px}.canvas-editor-tools{display:flex;gap:8px;padding:8px 12px;background:#0000004d;border-radius:8px;border:1px solid rgba(255,255,255,.1)}.tool-btn{width:36px;height:36px;border:2px solid #444;border-radius:6px;background:#ffffff1a;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;font-size:18px;color:#aaa}.tool-btn:hover{transform:scale(1.1);border-color:#888;color:#fff}.tool-btn.selected{border-color:#4ecdc4;box-shadow:0 0 8px #4ecdc499;transform:scale(1.1);color:#4ecdc4;background:#4ecdc426}.canvas-editor-palette{display:flex;flex-wrap:wrap;gap:6px;padding:10px 12px;background:#0000004d;border-radius:8px;border:1px solid rgba(255,255,255,.1);max-width:100%;justify-content:center}.palette-color{width:24px;height:24px;border:2px solid #444;border-radius:4px;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;flex-shrink:0}.palette-color:hover{transform:scale(1.1);border-color:#888}.palette-color.selected{border-color:#4ecdc4;box-shadow:0 0 8px #4ecdc499;transform:scale(1.1)}.palette-color.transparent-color{background-image:linear-gradient(45deg,#666 25%,transparent 25%),linear-gradient(-45deg,#666 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#666 75%),linear-gradient(-45deg,transparent 75%,#666 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0px;background-color:#999}.canvas-editor-canvas-wrapper{border:2px solid #4ecdc4;border-radius:4px;box-shadow:0 0 20px #4ecdc433;background:#1a1a1a;padding:2px}.canvas-editor-canvas-wrapper canvas{display:block;image-rendering:pixelated}.canvas-editor-info{color:#666;font-size:12px}.canvas-editor-footer{padding:16px 20px;border-top:2px solid #0f3460;display:flex;justify-content:space-between;align-items:center}.canvas-editor-footer-right{display:flex;gap:10px}.canvas-editor-btn{padding:10px 20px;font-size:14px;font-weight:600;border-radius:6px;cursor:pointer;transition:all .2s;border:none}.canvas-editor-btn.primary{background:linear-gradient(135deg,#4ecdc4,#3db3aa);color:#1a1a2e;box-shadow:0 4px 12px #4ecdc466}.canvas-editor-btn.primary:hover{transform:translateY(-2px);box-shadow:0 6px 16px #4ecdc499}.canvas-editor-btn.secondary{background:#ffffff1a;color:#ccc;border:1px solid rgba(255,255,255,.2)}.canvas-editor-btn.secondary:hover{background:#ffffff26;color:#fff}