*{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}@font-face{font-family:EI Display;src:url(/public/fonts/lilita-400.woff2) format("woff2");font-display:swap}@font-face{font-family:EI Text;src:url(/public/fonts/rubik-400.woff2) format("woff2");font-weight:400;font-display:swap}@font-face{font-family:EI Text;src:url(/public/fonts/rubik-700.woff2) format("woff2");font-weight:700;font-display:swap}@font-face{font-family:EI Text;src:url(/public/fonts/rubik-900.woff2) format("woff2");font-weight:900;font-display:swap}:root{--ei-ink: #0e1624;--ei-ink-2: #121c2c;--ei-panel: #172234;--ei-panel-2: #1e2b41;--ei-line: rgba(242, 234, 217, .09);--ei-line-2: rgba(242, 234, 217, .18);--ei-chalk: #f2ead9;--ei-muted: #93a1b8;--ei-faint: #66748c;--ei-amber: #ffb547;--ei-amber-deep: #e8891c;--ei-amber-ink: #2a1600;--ei-moss: #4fbf6a;--ei-steel: #7fa6c9;--ei-lab: #59d1b8;--ei-violet: #8b6cff;--ei-danger: #ff6b5e;--ei-r: 14px;--ei-r-lg: 20px;--ei-display: "EI Display", "Arial Rounded MT Bold", system-ui, sans-serif;--ei-text: "EI Text", system-ui, -apple-system, "Segoe UI", sans-serif}.ei-screen{min-height:100vh;min-height:100dvh;box-sizing:border-box;color:var(--ei-chalk);font-family:var(--ei-text);background:radial-gradient(1100px 620px at 50% -180px,rgba(255,181,71,.1),transparent 70%),linear-gradient(180deg,var(--ei-ink-2) 0%,var(--ei-ink) 60%);padding:max(14px,env(safe-area-inset-top)) 16px max(28px,env(safe-area-inset-bottom))}.ei-screen *,.ei-screen *:before,.ei-screen *:after{box-sizing:border-box}.ei-wrap{width:100%;max-width:1180px;margin:0 auto}.ei-narrow{max-width:620px}.ei-top{display:flex;align-items:center;gap:12px;min-height:48px;margin-bottom:18px}.ei-top-title{font-family:var(--ei-display);font-size:26px;letter-spacing:.5px;line-height:1;margin:0;flex:1;min-width:0}.ei-top-actions{display:flex;gap:8px;align-items:center}.ei-h1{font-family:var(--ei-display);font-size:clamp(30px,6vw,44px);line-height:1.02;letter-spacing:.5px;margin:0}.ei-h2{font-family:var(--ei-display);font-size:22px;line-height:1.1;margin:0;letter-spacing:.3px}.ei-label{font-size:12px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--ei-muted)}.ei-muted{color:var(--ei-muted)}.ei-dir-rtl .ei-label{letter-spacing:0}.ei-btn{font:700 15px/1 var(--ei-text);display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;border-radius:12px;cursor:pointer;color:var(--ei-chalk);background:var(--ei-panel-2);border:1px solid var(--ei-line-2);transition:transform .15s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease;text-decoration:none;white-space:nowrap;-webkit-tap-highlight-color:transparent}.ei-btn:hover{background:#24344d;border-color:#f2ead94d}.ei-btn:active{transform:scale(.97)}.ei-btn:focus-visible,.ei-card:focus-visible,.ei-chip:focus-visible{outline:2px solid var(--ei-amber);outline-offset:2px}.ei-btn[disabled]{opacity:.45;cursor:default;transform:none}.ei-btn--ghost{background:transparent;border-color:var(--ei-line-2)}.ei-btn--icon{width:44px;padding:0;font-size:18px}.ei-btn--danger{color:#ffb4ad;border-color:#ff6b5e59;background:#ff6b5e14}.ei-btn--big{min-height:56px;font-size:18px;border-radius:14px;padding:0 24px}.ei-btn--lit{color:var(--ei-amber-ink);border:none;background:linear-gradient(180deg,#ffc76b 0%,var(--ei-amber) 45%,var(--ei-amber-deep) 100%);box-shadow:0 0 0 1px #ffd28c66 inset,0 10px 30px -8px #ffa0328c,0 0 60px -10px #ffb54773}.ei-btn--lit:hover{background:linear-gradient(180deg,#ffd385,#ffbd57 45%,#f09526);box-shadow:0 0 0 1px #ffdca080 inset,0 12px 34px -8px #ffa032b3,0 0 80px -8px #ffb5478c}.ei-btn--ai{border:none;color:#fff;background:linear-gradient(135deg,#9a7dff 0%,var(--ei-violet) 50%,#5b6cf5 100%);box-shadow:0 10px 30px -10px #8b6cffb3}.ei-btn--ai:hover{background:linear-gradient(135deg,#a98fff,#977aff,#6a7af7)}.ei-chips{display:flex;gap:8px;flex-wrap:wrap}.ei-chip{font:700 14px/1 var(--ei-text);min-height:38px;padding:0 14px;border-radius:999px;cursor:pointer;color:var(--ei-muted);background:transparent;border:1px solid var(--ei-line-2);display:inline-flex;align-items:center;gap:6px;transition:all .15s ease;white-space:nowrap}.ei-chip:hover{color:var(--ei-chalk);border-color:#f2ead952}.ei-chip.is-on{color:var(--ei-amber-ink);background:var(--ei-amber);border-color:var(--ei-amber)}.ei-input{font:400 16px/1.3 var(--ei-text);width:100%;min-height:46px;padding:10px 14px;border-radius:12px;color:var(--ei-chalk);background:#00000047;border:1px solid var(--ei-line-2);outline:none}.ei-input:focus{border-color:var(--ei-amber);box-shadow:0 0 0 3px #ffb5472e}.ei-input::placeholder{color:var(--ei-faint)}.ei-panel{background:var(--ei-panel);border:1px solid var(--ei-line);border-radius:var(--ei-r-lg);padding:20px}.ei-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}.ei-card{position:relative;display:flex;flex-direction:column;border-radius:var(--ei-r-lg);overflow:hidden;cursor:pointer;background:var(--ei-panel);border:1px solid var(--ei-line);text-align:start;color:inherit;padding:0;font:inherit;transition:transform .2s ease,border-color .2s ease,box-shadow .25s ease}.ei-card:hover{transform:translateY(-3px);border-color:#ffb54773;box-shadow:0 18px 40px -18px #000c,0 0 50px -16px #ffb54773}.ei-card-art{position:relative;aspect-ratio:16 / 7;background:#070c15;overflow:hidden}.ei-card-art:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 55%,transparent 0%,transparent 28%,rgba(7,12,21,.72) 78%);transition:opacity .3s ease}.ei-card:hover .ei-card-art:after{opacity:.35}.ei-card-theme{position:absolute;top:10px;inset-inline-start:10px;z-index:1;font:700 12px/1 var(--ei-text);padding:6px 9px;border-radius:999px;background:#070c15b8;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid var(--ei-line-2)}.ei-card-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}.ei-card-name{font-family:var(--ei-display);font-size:21px;line-height:1.1;letter-spacing:.2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ei-card-meta{color:var(--ei-muted);font-size:13px;display:flex;gap:10px;flex-wrap:wrap}.ei-card-best{font-size:13px;color:var(--ei-chalk)}.ei-card-best b{color:var(--ei-amber)}.ei-card-foot{display:flex;gap:8px;margin-top:8px}.ei-card-foot .ei-btn{min-height:40px}.ei-card-play{flex:1}.ei-filters{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:center;margin-bottom:18px}.ei-filters .ei-input{flex:1 1 220px;max-width:360px}.ei-filters .ei-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.ei-filters .ei-chips::-webkit-scrollbar{display:none}.ei-select{font:700 14px/1 var(--ei-text);min-height:38px;padding:0 34px 0 14px;border-radius:999px;cursor:pointer;color:var(--ei-chalk);background:var(--ei-panel-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2393a1b8' stroke-width='2' fill='none'/%3E%3C/svg%3E") no-repeat right 14px center;border:1px solid var(--ei-line-2);appearance:none;-webkit-appearance:none}.ei-dir-rtl .ei-select{padding:0 14px 0 34px;background-position:left 14px center}.ei-empty{text-align:center;padding:48px 20px}.ei-empty p{color:var(--ei-muted);margin:8px 0 18px}@keyframes eiGlow{0%,to{box-shadow:0 0 0 1px #ffd28c66 inset,0 10px 30px -8px #ffa0328c,0 0 60px -10px #ffb54773}50%{box-shadow:0 0 0 1px #ffd28c80 inset,0 10px 34px -8px #ffa032b3,0 0 80px -6px #ffb54799}}.ei-btn--lit.ei-pulse{animation:eiGlow 2.6s ease-in-out infinite}@media(prefers-reduced-motion:reduce){.ei-btn--lit.ei-pulse{animation:none}.ei-card,.ei-btn{transition:none}}@media(max-width:640px){.ei-filters .ei-input{flex-basis:100%;max-width:none}.ei-filters .ei-chips{flex:1 1 0;min-width:0}.ei-top-title{font-size:22px}.ei-grid{grid-template-columns:1fr;gap:12px}.ei-panel{padding:16px}}.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}