:root{--bg: #e8f5ef;--panel: #fffdf6;--panel-2: #f0f8f4;--panel-3: #dcefe9;--border: #b9d8d2;--text: #173f4b;--dim: #52747b;--accent: #087e87;--accent-2: #19a4a5;--danger: #b94e47;--warn: #9d671d;--info: #176f91;--radius: 10px}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;padding:0;height:100%;background:linear-gradient(135deg,#d4efeb,#eef7ed 58%,#f8edd3);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;overflow:hidden;-webkit-text-size-adjust:100%;overscroll-behavior:none}#app{display:flex;flex-direction:column;height:100vh;height:100dvh}button,input,select,textarea{font-family:inherit;color:inherit}header{display:flex;align-items:center;gap:10px;padding:10px 16px;padding-top:max(8px,env(safe-area-inset-top,8px));background:linear-gradient(110deg,#c7ebe7,#eaf5eb 58%,#fff0cb);border-bottom:1px solid var(--border);box-shadow:0 4px 20px #20697014;flex-shrink:0}.logo{font-weight:700;font-size:1rem;display:flex;align-items:center;gap:9px;white-space:nowrap}.icon-sprite{position:absolute;width:0;height:0;overflow:hidden}.ui-icon{width:17px;height:17px;display:inline-block;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}.brand-mark{width:36px;height:36px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(145deg,#0f8790,#35b8ae);color:#fffef3;box-shadow:0 5px 12px #0970793b}.brand-mark .ui-icon{width:25px;height:25px}.logo-copy{display:flex;flex-direction:column;line-height:1.06}.logo-text{font-family:Georgia,Palatino Linotype,serif;letter-spacing:-.03em}header button{display:inline-flex;align-items:center;justify-content:center;gap:5px}.icon-btn .ui-icon{width:17px;height:17px}.project-btn{display:flex;align-items:center;gap:6px;max-width:210px;background:#fffdf6bd;border:1px solid var(--border);border-radius:var(--radius);padding:5px 9px;font-size:.78rem;cursor:pointer;min-width:0}.project-btn:hover{background:#fffef8}.project-btn .project-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.project-btn .caret{color:var(--dim);font-size:.7rem}.status-dot{width:8px;height:8px;border-radius:50%;background:var(--warn);transition:background .25s;flex-shrink:0}.status-dot.ready{background:var(--accent)}.status-dot.error{background:var(--danger)}.status-dot.booting,.status-dot.running{background:var(--warn);animation:pulse 1s infinite}.status-dot.stopped{background:var(--dim)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.3}}.status-label{font-size:.7rem;color:var(--dim);max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.spacer{flex:1}button,.file-label{font-family:inherit;font-size:.78rem;padding:7px 11px;border-radius:var(--radius);border:1px solid var(--border);background:#fffdf6ad;color:var(--text);cursor:pointer;transition:background .15s,transform .1s,opacity .15s,box-shadow .15s;white-space:nowrap}button:hover:not(:disabled),.file-label:hover{background:#fffef8;box-shadow:0 2px 8px #10666f1a}button:active:not(:disabled){transform:scale(.96)}button:disabled{opacity:.48;cursor:not-allowed}button:focus-visible,.file-label:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fffef8;font-weight:700;border:none;box-shadow:0 4px 12px #087e8733}.btn-primary:hover:not(:disabled){background:linear-gradient(135deg,#0b6f7b,#168d92)}.btn-danger{background:var(--danger);color:#fff;font-weight:700;border:none}.btn-danger:hover:not(:disabled){background:#9c3e39}.btn-ghost{background:#ffffff47}.btn-ghost:hover:not(:disabled){background:#ffffffbd}.icon-btn{padding:4px 8px;font-size:.95rem;line-height:1;background:transparent;border:none;color:var(--dim)}.icon-btn:hover{color:var(--text);background:#087e8717}.icon-btn.danger:hover{color:var(--danger)}main{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;grid-template-areas:"code game" "code log";flex:1;min-height:0;overflow:hidden}.editor-pane{grid-area:code;display:flex;flex-direction:column;min-height:0;min-width:0;border-right:1px solid var(--border);background:var(--panel)}.game-wrap{grid-area:game;position:relative;background:#b8e3df;display:flex;align-items:center;justify-content:center;min-height:0;min-width:0;overflow:hidden;padding:8px}.console{grid-area:log;border-top:1px solid var(--border);background:#f6fbf6;display:flex;flex-direction:column;height:180px;min-height:0;transition:height .15s ease}.console.collapsed{height:30px}.tabs{display:flex;align-items:stretch;background:#e4f3ed;border-bottom:1px solid var(--border);overflow-x:auto;flex-shrink:0;scrollbar-width:thin}.tabs::-webkit-scrollbar{height:4px}.tabs::-webkit-scrollbar-thumb{background:var(--border)}.tab{display:flex;align-items:center;gap:4px;padding:0 4px 0 0;font-size:.75rem;color:var(--dim);background:transparent;border:none;border-right:1px solid var(--border);white-space:nowrap;font-family:inherit;border-radius:0}.tab-select{padding:8px 4px 8px 12px;color:inherit;background:transparent;border:0;font:inherit;cursor:pointer}.tab:hover{color:var(--text);background:#ffffff85}.tab.active{background:var(--panel);color:var(--text);box-shadow:inset 0 -2px 0 var(--accent)}.tab.entry .tab-label:after{content:" ▶";color:var(--accent);font-size:.65rem}.tab .tab-close{padding:1px 5px;border-radius:3px;opacity:.35;font-size:.9rem;line-height:1;border:none;background:transparent;color:inherit;cursor:pointer;font-family:inherit}.tab .tab-close:hover{opacity:1;background:#087e871a}.tab-add{padding:8px 14px;color:var(--dim);background:transparent;border:none;border-right:1px solid var(--border);cursor:pointer;font-size:1rem;font-family:inherit}.tab-add:hover{color:var(--accent);background:#ffffff9e}#editor{flex:1;min-height:0;overflow:hidden;position:relative}#editor .cm-editor{height:100%}.editor-status{display:flex;align-items:center;gap:8px;padding:4px 12px;background:#e9f5ee;border-top:1px solid var(--border);font-size:.68rem;color:var(--dim);flex-shrink:0;white-space:nowrap}.editor-status .dot-sep{opacity:.5}.editor-status .flex-spacer{flex:1}.save-indicator{color:var(--dim);font-size:.72rem;white-space:nowrap}.save-indicator.error{color:var(--danger)}.help-steps{line-height:1.65;padding-left:1.5rem}.help-steps li{margin-bottom:.5rem}.lint-summary{color:var(--dim)}.lint-summary.bad{color:var(--danger)}.lint-summary.warn{color:var(--warn)}.game-frame{width:100%;height:100%;border:none;display:block;background:#d3eee7;border-radius:14px;box-shadow:0 10px 24px #145f6e24}.frame-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;padding:24px;text-align:center;color:var(--dim);font-size:.85rem;pointer-events:none;background:linear-gradient(180deg,#edfbf51f,#0f68701f),url(./lagoon-scene-ZNq4hx_2.svg) center / cover no-repeat}.frame-placeholder.hidden{display:none}.frame-placeholder.interactive{pointer-events:auto}.frame-placeholder .ph-title{color:#164c58;background:#fffdf3e0;border:1px solid rgba(255,255,255,.7);border-radius:14px;padding:12px 18px;font:700 clamp(1rem,1.7vw,1.35rem)/1.25 Georgia,"Palatino Linotype",serif;box-shadow:0 8px 28px #0d5a6624}.frame-placeholder .hint{font-size:.75rem;color:#195a63;background:#fffdf3cc;padding:7px 12px;border-radius:999px;max-width:34em}.frame-placeholder .ph-retry{pointer-events:auto;margin-top:6px}.console-header{display:flex;align-items:center;gap:8px;padding:5px 12px;background:#e8f4ec;border-bottom:1px solid var(--border);font-size:.68rem;color:var(--dim);cursor:pointer;user-select:none;flex-shrink:0;text-transform:uppercase;letter-spacing:.06em}.console-header:hover{color:var(--text)}.console-title{flex:1}.console-badge{background:var(--danger);color:#fff;border-radius:999px;padding:1px 7px;font-weight:700;font-size:.64rem;letter-spacing:0}.console-body{flex:1;padding:8px 12px;overflow-y:auto;font-family:Fira Code,JetBrains Mono,Consolas,ui-monospace,monospace;font-size:12px;line-height:1.5;white-space:pre-wrap;word-break:break-word;color:var(--text)}.console-body::-webkit-scrollbar{width:8px}.console-body::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}.line{margin:0}.line.err{color:var(--danger)}.line.ok{color:var(--accent)}.line.info{color:var(--info)}.line.warn{color:var(--warn)}.line.dim{color:var(--dim)}.mobile-nav{display:none}@media(max-width:820px){header{padding:6px 10px;gap:6px}.logo{font-size:.82rem;gap:4px}.brand-mark{width:30px;height:30px;border-radius:10px}.brand-mark .ui-icon{width:21px;height:21px}.logo-text{display:block;max-width:104px;white-space:normal;line-height:1.05}.status-label{display:none}.project-btn{max-width:120px}button{padding:6px 9px;font-size:.72rem}.btn-primary{padding:6px 14px}.btn-ghost{padding:6px 8px}.btn-text{display:none}main{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}.editor-pane,.game-wrap,.console{display:none;flex:1 1 0;min-height:0;width:100%;border:none!important}.editor-pane.mobile-active,.game-wrap.mobile-active,.console.mobile-active{display:flex}.console,.console.collapsed{height:auto}.console-header{display:none}.game-wrap{padding:0}#editor .cm-scroller{font-size:12px}.mobile-nav{display:flex;background:var(--panel);border-top:1px solid var(--border);flex-shrink:0;padding-bottom:env(safe-area-inset-bottom,0px)}.mobile-nav button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:8px 4px 7px;border:none;border-radius:0;background:transparent;color:var(--dim);font-family:inherit;cursor:pointer;transition:color .15s,background .15s;box-shadow:inset 0 2px 0 transparent}.mobile-nav button .icon{width:20px;height:20px}.mobile-nav button .label{font-size:.62rem;letter-spacing:.02em}.mobile-nav button.active{color:var(--accent);background:#087e871a;box-shadow:inset 0 2px 0 var(--accent)}}@media(max-width:420px){.logo-text{max-width:80px;font-size:.73rem}.status-dot{display:none}.project-btn{max-width:92px}}.overlay{position:fixed;inset:0;background:#0f414b59;opacity:0;transition:opacity .15s;z-index:90}.overlay.open{opacity:1}.overlay[hidden]{display:none}.modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.98);width:min(560px,94vw);max-height:84vh;display:flex;flex-direction:column;gap:12px;background:#fffdf5;border:1px solid var(--border);border-radius:14px;box-shadow:0 24px 70px #0f4b563d;padding:18px;opacity:0;transition:opacity .15s,transform .15s;z-index:100}.modal.open{opacity:1;transform:translate(-50%,-50%) scale(1)}.modal[hidden]{display:none}.modal.busy{opacity:.7;pointer-events:none}.modal-head{display:flex;align-items:center;gap:10px}.modal-head h3{margin:0;font-size:.98rem;flex:1}.modal .hint{margin:0;font-size:.75rem;color:var(--dim);line-height:1.5}.modal .hint[hidden]{display:none}.modal-body{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding-right:2px}.modal-body::-webkit-scrollbar{width:8px}.modal-body::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}.modal-actions{display:flex;gap:8px;justify-content:flex-end;align-items:center;flex-wrap:wrap}.modal-actions .spacer{flex:1}.modal-error{background:#b94e4717;border:1px solid rgba(185,78,71,.3);color:var(--danger);border-radius:var(--radius);padding:8px 10px;font-size:.78rem}.dialog-message{margin:0;font-size:.85rem;line-height:1.6;color:var(--text)}.field{display:flex;flex-direction:column;gap:6px}.field-label{font-size:.75rem;color:var(--dim)}.field input{background:var(--panel-2);border:1px solid var(--border);border-radius:var(--radius);padding:9px 11px;font-size:.88rem;color:var(--text);width:100%}.field input:focus{border-color:var(--accent);outline:none}.file-label{display:inline-flex;align-items:center;gap:6px}.empty-state{text-align:center;color:var(--dim);font-size:.82rem;padding:30px 16px}.list{display:flex;flex-direction:column;gap:6px}.list-row{display:flex;align-items:center;gap:6px;background:var(--panel-2);border:1px solid transparent;border-radius:8px;padding:4px 6px 4px 4px}.list-row.current{border-color:#087e8766}.list-main{flex:1;display:flex;flex-direction:column;gap:3px;align-items:flex-start;text-align:left;background:transparent;border:none;padding:7px 9px;min-width:0;cursor:pointer;border-radius:6px}.list-main.static{cursor:default}.list-main:hover{background:#087e8712}.list-name{font-size:.84rem;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}.list-name.is-current:after{content:" · open";color:var(--accent);font-size:.7rem}.list-meta{font-size:.7rem;color:var(--dim)}.list-tools{display:flex;gap:2px;flex-shrink:0}.list.cards{gap:8px}.card{display:grid;grid-template-columns:112px minmax(0,1fr);grid-template-rows:auto auto;column-gap:13px;row-gap:4px;align-items:center;text-align:left;background:var(--panel-2);border:1px solid var(--border);border-radius:10px;padding:8px 12px 8px 8px;cursor:pointer;width:100%}.card:hover{border-color:var(--accent);background:#e7f5ef;box-shadow:0 5px 15px #085a671a}.card-head{display:flex;align-items:center;gap:8px;grid-column:2;align-self:end}.card-name{font-size:.87rem;font-weight:600;flex:1}.card-badge{font-size:.64rem;color:var(--dim);background:var(--panel-3);border-radius:999px;padding:2px 8px}.card-desc{grid-column:2;align-self:start;font-size:.74rem;color:var(--dim);line-height:1.5}.template-preview{grid-row:1 / 3;position:relative;width:112px;height:74px;overflow:hidden;border-radius:9px;border:1px solid rgba(18,100,113,.15);background:linear-gradient(#c8eeeb 0 48%,#64c4c5 49%,#157588);box-shadow:inset 0 0 0 1px #ffffff40}.template-preview:before,.template-preview:after{content:"";position:absolute;display:block}.template-preview[data-game=bouncing-ball]:before{width:34px;height:34px;left:37px;top:23px;border-radius:50%;background:radial-gradient(circle at 30% 28%,#fff5d4 0 13%,#79d6cf 15% 37%,#1699a5 70%);box-shadow:3px 7px 10px #034b5f40}.template-preview[data-game=bouncing-ball]:after{width:84px;height:13px;left:14px;bottom:3px;border-top:2px solid rgba(234,255,247,.8);border-radius:50%;transform:rotate(-7deg)}.template-preview[data-game=pong]{background:radial-gradient(circle at 57% 42%,#fff7d9 0 5px,transparent 6px),repeating-linear-gradient(180deg,transparent 0 7px,rgba(245,255,250,.62) 7px 11px,transparent 11px 17px) center / 2px 100% no-repeat,linear-gradient(145deg,#14566b,#092f4d)}.template-preview[data-game=pong]:before{width:6px;height:29px;left:14px;top:12px;border-radius:4px;background:#85dfcb}.template-preview[data-game=pong]:after{width:6px;height:29px;right:14px;bottom:10px;border-radius:4px;background:#f7a47e}.template-preview[data-game=snake]{background:repeating-linear-gradient(90deg,transparent 0 16px,rgba(143,224,213,.13) 16px 17px),repeating-linear-gradient(0deg,transparent 0 16px,rgba(143,224,213,.13) 16px 17px),#145364}.template-preview[data-game=snake]:before{width:13px;height:13px;left:20px;top:17px;border-radius:4px;background:#9ce6c9;box-shadow:16px 0 #5cc4ae,32px 0 #5cc4ae,32px 16px #5cc4ae,48px 16px #5cc4ae}.template-preview[data-game=snake]:after{width:12px;height:12px;right:21px;bottom:16px;border-radius:50%;background:#f39c73;box-shadow:0 0 0 3px #f39c7333}.template-preview[data-game=platformer]{background:linear-gradient(#bfe8e3 0 68%,#7dc4ba 69%,#347f83)}.template-preview[data-game=platformer]:before{width:43px;height:8px;left:9px;bottom:13px;border-radius:4px;background:#e6c484;box-shadow:49px -17px #e6c484,12px -33px #e6c484}.template-preview[data-game=platformer]:after{width:15px;height:22px;left:25px;top:16px;border-radius:5px;background:#0d8894;box-shadow:inset -4px -4px #054f5c40}.template-preview[data-game=particles]{background:radial-gradient(circle at 23% 33%,#fff2c0 0 3px,transparent 4px),radial-gradient(circle at 36% 68%,#f7a281 0 5px,transparent 6px),radial-gradient(circle at 52% 20%,#9ce8d0 0 4px,transparent 5px),radial-gradient(circle at 68% 60%,#f4d089 0 6px,transparent 7px),radial-gradient(circle at 82% 33%,#8dd7dc 0 3px,transparent 4px),linear-gradient(145deg,#104b66,#092e4a)}.template-preview[data-game=particles]:before{width:45px;height:45px;left:31px;top:15px;border:1px solid rgba(197,247,221,.45);border-radius:50%;box-shadow:0 0 20px #7fe5d340}.template-preview[data-game=blank]{background:url(./lagoon-scene-ZNq4hx_2.svg) center / cover no-repeat}.template-preview[data-game=multi-file]{background:linear-gradient(145deg,#94dbd3,#257f8b)}.template-preview[data-game=multi-file]:before,.template-preview[data-game=multi-file]:after{width:42px;height:49px;top:12px;border-radius:5px;border:2px solid rgba(255,255,255,.85);background:repeating-linear-gradient(180deg,transparent 0 10px,rgba(16,109,116,.28) 10px 12px),#eaf8ec;box-shadow:2px 4px 8px #044c592e}.template-preview[data-game=multi-file]:before{left:25px;transform:rotate(-9deg)}.template-preview[data-game=multi-file]:after{left:47px;transform:rotate(9deg)}@media(max-width:440px){.card{grid-template-columns:76px minmax(0,1fr);column-gap:9px}.template-preview{width:76px}}.boot{position:fixed;inset:0;background:linear-gradient(145deg,#d3f0eb,#eff7ed 55%,#fff0cc);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;z-index:200;transition:opacity .3s}.boot.hidden{opacity:0;pointer-events:none}.spinner{width:40px;height:40px;border:3px solid rgba(8,126,135,.14);border-top-color:var(--accent);border-radius:50%;animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.boot .msg{font-size:.88rem}.boot .sub{font-size:.72rem;color:var(--dim);padding:0 24px;text-align:center;max-width:34em;line-height:1.6}.noscript{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:var(--bg);color:var(--text);font-size:1rem;z-index:300}