*{box-sizing:border-box}body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation;color:#fff;background:#3b2f4a radial-gradient(circle at 50% 30%,#5a4870 0%,#2c2238 80%);justify-content:safe center;min-height:100vh;margin:0;font-family:ui-rounded,SF Pro Rounded,Nunito,system-ui,sans-serif;display:flex}input,textarea{-webkit-user-select:text;user-select:text}#toolbar{align-items:center;gap:14px;width:0;min-width:100%;margin-bottom:12px;display:flex}#toolbar button,#level-select{box-sizing:border-box;flex-shrink:0;height:44px}#toolbar button{white-space:nowrap;font:inherit;color:#2b2118;cursor:pointer;background:#ffd23f;border:3px solid #2b2118;border-radius:14px;justify-content:center;align-items:center;gap:8px;padding:0 18px;font-size:17px;font-weight:700;transition:transform 60ms,box-shadow 60ms;display:inline-flex}#toolbar button:hover:not(:disabled){background:#ffdf6b}#toolbar button:active:not(:disabled){transform:translateY(1px)}#toolbar button:disabled{color:#6b604f;cursor:default;background:#b8ad95}#btn-reset:not(:disabled){background:#7fd3ff}#status{opacity:.9;font-variant-numeric:tabular-nums;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;flex:380px;min-width:0;font-weight:600;line-height:1.25;display:-webkit-box;overflow:hidden}#status.win{color:#8dff9a}#level-select{font:inherit;color:#2b2118;cursor:pointer;background:#fff4d6;border:3px solid #2b2118;border-radius:14px;margin-left:auto;padding:0 12px;font-size:16px;font-weight:700}#game{touch-action:none;-webkit-tap-highlight-color:transparent;border:2px solid #2b2118;border-radius:16px;display:block}#app{margin-top:16px}#stage{--stage-h:658px;align-items:flex-start;gap:14px;display:flex}#toolbar button.secondary{background:#fff4d6}#toolbar button.icon{width:48px;min-width:44px;padding:0}#toolbar button.icon svg{display:block}#toolbar button.icon:disabled{color:#c9bea8}#btn-undo,#btn-align-x{margin-right:-8px}#palette{box-sizing:border-box;width:190px;height:var(--stage-h);color:#2b2118;-webkit-user-select:none;user-select:none;background:#fff4d6;border:2px solid #2b2118;border-radius:16px;padding:12px;overflow-y:auto}#palette h2{text-align:center;margin:0 0 8px;font-size:18px}#inventory{flex-direction:column;gap:14px;padding-top:6px;display:flex}.inv-item{cursor:grab;touch-action:none;transition:transform 80ms;position:relative}.inv-item:hover:not(.empty){transform:translateY(-2px)rotate(-1deg)}.inv-item:hover:not(.empty) canvas{background:#fff}.inv-item.empty{opacity:.4;cursor:default;filter:grayscale(.8)}.inv-item canvas{pointer-events:none;background:#fdf3d8;border:3px solid #2b2118;border-radius:12px;margin:0 auto;display:block}.inv-item .label{text-align:center;margin-top:5px;font-size:13px;font-weight:700;line-height:1.2}.inv-item .count{text-align:center;background:#ffd23f;border:3px solid #2b2118;border-radius:14px;min-width:28px;height:28px;padding:0 6px;font-weight:800;line-height:22px;position:absolute;top:-9px;right:-4px}#hint{opacity:.75;text-align:center;margin:12px 0 0;font-size:12px;line-height:1.5}#palette.running .inv-item{opacity:.5;cursor:default}#app[data-mode=play] [data-show]:not([data-show~=play]),#app[data-mode=test] [data-show]:not([data-show~=test]),#app[data-mode=design] [data-show]:not([data-show~=design]){display:none!important}#designer{box-sizing:border-box;width:440px;height:var(--stage-h);color:#2b2118;background:#fff4d6;border:2px solid #2b2118;border-radius:16px;flex-direction:column;flex-shrink:0;padding:10px 12px;font-size:13px;display:flex;overflow:hidden}.d-tabs{border-bottom:3px solid #2b2118;flex:none;gap:4px;margin:-2px 0 0;display:flex}.d-tab-btn{font:inherit;color:#6b604f;cursor:pointer;background:#f1e4bf;border:3px solid #2b2118;border-bottom:none;border-radius:10px 10px 0 0;flex:1;margin-bottom:-3px;padding:6px 8px;font-size:14px;font-weight:800}.d-tab-btn:hover{color:#2b2118}.d-tab-btn.on{color:#2b2118;background:#fff4d6;margin-top:-3px;padding-bottom:9px}.d-tab{flex:1;min-height:0;margin-right:-6px;padding:10px 6px 4px 0;overflow:hidden auto}.d-tab[hidden]{display:none}#designer h3{border-bottom:2px solid #2b211833;margin:18px 0 10px;padding-bottom:4px;font-size:17px}#designer h3:first-child{margin-top:0}.d-hint{opacity:.75;margin:6px 0;font-size:12.5px;line-height:1.45}.d-hint-bottom{margin-top:12px}.d-palette{-webkit-user-select:none;user-select:none;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;display:grid}.d-part{cursor:grab;text-align:center;touch-action:none}.d-part canvas{pointer-events:none;background:#fdf3d8;border:1px solid #2b21182e;border-radius:8px;max-width:100%;margin:0 auto;display:block}.d-part:hover canvas{background:#fff;border-color:#2b211873}.d-part-label{margin-top:2px;font-size:10.5px;font-weight:700;line-height:1.15}.d-sel-title{margin-bottom:6px;font-size:15px;font-weight:800}.d-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px 12px;display:grid}.d-grid>*,.d-field{min-width:0}.d-field{flex-direction:column;gap:5px;font-size:14.5px;font-weight:700;display:flex}.d-field.wide{margin-bottom:10px}.d-field input,.d-field select,.d-field textarea,.d-inv select,.d-inv input{font:inherit;color:#2b2118;box-sizing:border-box;background:#fff;border:2px solid #2b2118;border-radius:8px;width:100%;min-width:0;min-height:34px;padding:6px 9px;font-size:14px;font-weight:500}.d-field textarea{resize:vertical}.d-num{align-items:center;gap:5px;height:34px;display:flex}.d-num input{text-align:center;flex:1;min-width:0;height:34px}.d-step{width:34px;height:34px;font:inherit;color:#2b2118;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:none;background:#ffe9a8;border:2px solid #2b2118;border-radius:7px;flex:none;padding:0;font-size:18px;font-weight:800;line-height:1}.d-step:hover{background:#ffdf6b}.d-step:active{transform:translateY(1px)}.d-range{accent-color:#2f6fd6;cursor:pointer;width:100%;margin:6px 0 2px}.d-defaults{margin-top:12px}.d-defaults .d-row{flex-wrap:nowrap}.d-defaults .d-row .d-btn{flex:1 1 0;justify-content:center;align-items:center;gap:6px;min-width:0;padding:8px 6px;font-size:13.5px;line-height:1.2;display:inline-flex}.d-defaults .d-btn svg{flex:none}.d-btn.d-reset{background:#ffe9a8}.d-btn.d-reset:hover{background:#ffdf6b}.d-btn.d-save{background:#9ee0a6}.d-btn.d-to-inv{background:#c9b8f0;margin:0 0 12px}.d-btn.d-to-inv:hover{background:#d9cdf5}.d-btn.d-danger{background:#f5b1a8}.d-btn.d-danger:hover{background:#f8c6bf}.d-ghost-row .d-btn{flex:1}.d-del-row{gap:8px;display:flex}.d-del-row select{flex:1}.d-del-row .d-btn{white-space:nowrap;flex:none}.d-btn.d-save:hover{background:#b6ebbc}.d-link{font:inherit;color:#2f6fd6;cursor:pointer;background:0 0;border:none;padding:0;font-weight:700;text-decoration:underline}.d-row{flex-wrap:wrap;gap:8px;margin-top:10px;display:flex}.d-btn{font:inherit;color:#2b2118;cursor:pointer;background:#7fd3ff;border:2px solid #2b2118;border-radius:10px;min-height:36px;padding:6px 14px;font-size:14px;font-weight:700}.d-btn.wide{width:100%;margin-top:10px}.d-btn:disabled{color:#9a917e;cursor:default;background:#d8d0bc}.d-btn:active:not(:disabled){transform:translateY(1px)}.d-popup{z-index:20;color:#2b2118;background:#fff4d6;border:3px solid #2b2118;border-radius:12px;width:480px;max-height:520px;padding:12px 14px 14px;font-size:13px;position:absolute;overflow-y:auto;box-shadow:0 5px #2b2118,0 10px 24px #00000059}.d-popup[hidden]{display:none}.d-popup .d-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 14px}.d-popup .d-num{height:30px}.d-popup .d-num input{height:30px;min-height:30px}.d-popup .d-step{width:30px;height:30px;font-size:16px}.d-popup .d-num{gap:3px}.d-popup .d-num input{padding:4px 2px}.d-popup .d-field>span{white-space:nowrap;text-overflow:ellipsis;font-size:13.5px;overflow:hidden}.d-popup-head{justify-content:space-between;align-items:center;gap:8px;margin-bottom:4px;display:flex}.d-popup-head .d-sel-title{margin:0}.d-popup-close{font:inherit;color:#2b2118;cursor:pointer;background:0 0;border:none;border-radius:6px;width:30px;height:30px;padding:0;font-size:16px;font-weight:800}.d-popup-close:hover{background:#2b21181a}.d-inv-wrap{background:#ffffff8c;border-radius:10px;margin-bottom:10px;padding:10px}.d-inv{align-items:center;gap:8px;margin-bottom:8px;display:flex}.d-inv select{flex:1;width:auto}.d-inv input{flex:none;width:70px}.d-inv .d-btn{flex:none}@supports not selector(::-webkit-scrollbar){.d-tab,#palette,.d-popup{scrollbar-width:thin;scrollbar-color:#c9874a #f1e4bf}}.d-tab::-webkit-scrollbar{width:12px}#palette::-webkit-scrollbar{width:12px}.d-popup::-webkit-scrollbar{width:12px}.d-tab::-webkit-scrollbar-track{background:#f1e4bf;border-radius:6px;margin:10px 0;box-shadow:inset 0 0 0 2px #2b21181f}#palette::-webkit-scrollbar-track{background:#f1e4bf;border-radius:6px;margin:10px 0;box-shadow:inset 0 0 0 2px #2b21181f}.d-popup::-webkit-scrollbar-track{background:#f1e4bf;border-radius:6px;margin:10px 0;box-shadow:inset 0 0 0 2px #2b21181f}.d-tab::-webkit-scrollbar-thumb{background:#d39350;border:2px solid #2b2118;border-radius:6px;box-shadow:inset 0 2px #ffebc873}#palette::-webkit-scrollbar-thumb{background:#d39350;border:2px solid #2b2118;border-radius:6px;box-shadow:inset 0 2px #ffebc873}.d-popup::-webkit-scrollbar-thumb{background:#d39350;border:2px solid #2b2118;border-radius:6px;box-shadow:inset 0 2px #ffebc873}.d-tab::-webkit-scrollbar-thumb:hover{background:#e0a560}#palette::-webkit-scrollbar-thumb:hover{background:#e0a560}.d-popup::-webkit-scrollbar-thumb:hover{background:#e0a560}.d-tab::-webkit-scrollbar-thumb:active{background:#c9874a}#palette::-webkit-scrollbar-thumb:active{background:#c9874a}.d-popup::-webkit-scrollbar-thumb:active{background:#c9874a}#toolbar #btn-fullscreen svg.fs-exit,#toolbar #btn-fullscreen.on svg.fs-enter{display:none}#toolbar #btn-fullscreen.on svg.fs-exit{display:block}#btn-fullscreen[hidden],#btn-sound svg .snd-off,#btn-sound.muted svg .snd-on{display:none}#btn-sound.muted svg .snd-off{display:inline}#btn-panel{display:none!important}#rotate-hint{display:none}@media (width<=1366px),(pointer:coarse){#app,#app[data-mode]{margin-top:8px}#toolbar{gap:8px;margin-bottom:8px}#toolbar button{padding:0 12px;font-size:16px}#toolbar .lbl{display:none}#btn-save,#btn-clear-design,#btn-edit-level,#btn-design,#btn-back-design,#btn-play{width:48px;padding:0}#btn-undo,#btn-align-x{margin-right:0}#status{flex:auto;width:auto;min-width:0;font-size:14px}#level-select{max-width:220px}#stage{gap:10px}#palette{width:170px;padding:10px}#inventory{gap:12px}.inv-item canvas{width:100%;height:auto}#designer{width:330px}#btn-panel{display:inline-flex!important}#btn-panel.on{background:#ffd23f}#stage{position:relative;overflow:clip visible}#palette,#designer{z-index:10;visibility:hidden;position:absolute;top:0;right:0;transform:translate(calc(100% + 24px))}#app.panel-open #palette,#app.panel-open #designer{visibility:visible;transform:none}#app.ready #palette,#app.ready #designer{transition:transform .22s,visibility .22s}.d-palette{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (pointer:coarse){.keys-hint{display:none}}@media (pointer:coarse) and (orientation:portrait){#rotate-hint{z-index:1000;text-align:center;color:#ffd23f;background:#2c2238;justify-content:center;align-items:center;padding:40px;font-size:28px;font-weight:800;display:flex;position:fixed;inset:0}}