@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@500;600;700;800;900&display=swap');
:root{font-family:Nunito,ui-rounded,system-ui,sans-serif;color:#f5f6ff;background:#080d18;font-synthesis:none;font-weight:700;--line:#ffffff20}
*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100svh;background:#080d18}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.app{width:min(100%,1120px);height:100svh;min-height:420px;margin:auto;padding:0 24px;display:grid;grid-template-rows:68px minmax(0,1fr)}.topbar{display:flex;align-items:center;gap:12px}.brand{display:flex;align-items:center;gap:9px;color:white;text-decoration:none;font-size:21px;font-weight:900;letter-spacing:-.6px;flex:none}.brand-mark{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;color:#fff;font-size:18px;background:#2865f5}.icon-button,.close-button{border:1px solid var(--line);background:#ffffff0a;width:42px;height:42px;border-radius:11px;font-size:19px;color:#dce4ff;flex:none}.icon-button{width:44px;height:44px;position:relative;display:grid;place-items:center;padding:0}.icon-button:hover,.close-button:hover{background:#ffffff18}.settings-progress{position:absolute;bottom:4px;left:50%;transform:translateX(-50%);display:flex;gap:2px;width:26px;height:3px}.settings-progress i{flex:1;border-radius:2px;background:#ffffff35;transition:background .16s,transform .16s}.settings-progress i.filled{background:#ffd42f;transform:scaleY(1.4)}.stage-wrap{position:relative;overflow:hidden;border:1px solid #29354b;border-radius:18px;background:#080d18}#world{width:100%;height:100%;display:block;touch-action:none}.toolbar{display:flex;align-items:center;justify-content:center;gap:7px;margin-left:auto;flex:1;min-width:0}.action{display:flex;align-items:center;justify-content:center;gap:8px;padding:9px 12px;border:1px solid #ffffff23;border-radius:11px;background:#111827;transition:transform .15s,background .15s,border-color .15s;font-size:14px;white-space:nowrap;flex:1;min-width:0;height:48px}.action:hover{background:#1a2639}.action:active{transform:scale(.97)}.action-spawn{--mode-accent:#25cb70;--mode-background:#284b41}.action-pop{--mode-accent:#ffd42f;--mode-background:#51472a}.action-puff{--mode-accent:#ff756b;--mode-background:#51343e}.action.selected{background:var(--mode-background);border-color:#f5f6ff;color:#fff;box-shadow:inset 0 0 0 2px #f5f6ff,inset 0 -6px 0 var(--mode-accent)}.action:focus-visible{outline:3px solid #38d9ff;outline-offset:2px}.action-icon{display:block;width:32px;height:32px;flex:none}.action>span{font-weight:900}
.settings{position:absolute;z-index:2;right:18px;top:18px;width:min(330px,calc(100% - 36px));padding:20px;border:1px solid #ffffff25;border-radius:14px;background:#111827;box-shadow:0 10px 30px #0008}.settings-head{display:flex;align-items:center;justify-content:space-between;font-size:17px;margin-bottom:15px}.close-button{width:32px;height:32px;border-radius:9px;font-size:22px}.setting{display:grid;grid-template-columns:1fr auto;align-items:center;gap:7px 10px;margin:15px 0;font-size:13px}.setting input{grid-column:1/2;grid-row:2;width:100%;accent-color:#ffd42f}.setting output{grid-column:2;grid-row:1/3;color:#c4c9d4;font-size:12px;min-width:43px;text-align:right}.settings-note{margin:16px 0 0;color:#9eabc6;font-size:11px;font-weight:600}
.reset-button{width:100%;margin-top:8px;padding:10px 12px;border:1px solid #ffffff24;border-radius:10px;background:#1b2637;color:#f5f6ff;font:inherit;font-size:13px}.reset-button:hover{background:#28364c}
@media(max-width:600px){.app{padding:0 10px;grid-template-rows:58px minmax(0,1fr)}.topbar{gap:6px}.brand{font-size:0;gap:0}.brand-mark{width:30px;height:30px}.icon-button{width:44px;height:44px;font-size:18px}.toolbar{gap:4px}.action{flex-direction:column;gap:2px;padding:3px;border-radius:10px;font-size:clamp(9px,2.8vw,11px);line-height:1;height:48px}.action-icon{width:25px;height:25px}.stage-wrap{border-radius:13px}}
@media(max-width:360px){.app{padding:0 7px}.action{gap:2px;padding:3px 2px;font-size:10px}.brand-mark{width:27px;height:27px}}
@media(max-height:560px){.app{grid-template-rows:52px minmax(0,1fr)}.action{height:44px;padding:3px}.action-icon{width:23px;height:23px}}

.fullscreen-icon{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}.fullscreen-exit{display:none}#fullscreen-toggle[aria-pressed="true"] .fullscreen-enter{display:none}#fullscreen-toggle[aria-pressed="true"] .fullscreen-exit{display:block}.icon-button:focus-visible{outline:3px solid #38d9ff;outline-offset:2px}
.app.is-fullscreen{width:100%;height:100dvh;min-height:0;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);padding-left:max(10px,env(safe-area-inset-left,0px));padding-right:max(10px,env(safe-area-inset-right,0px));background:#080d18}
.fullscreen-status{position:absolute;z-index:3;top:12px;left:12px;right:12px;width:fit-content;max-width:calc(100% - 24px);margin:0 auto;padding:12px 16px;border:1px solid var(--line);border-radius:12px;background:#111827;color:#f5f6ff;font-size:13px;pointer-events:none}
@media(max-width:360px){.brand{display:none}}
@media(max-height:560px){.app{min-height:0}}