*{box-sizing:border-box;margin:0;padding:0}:root{--ink: #2b2118;--paper: #efe6d5;--panel: #3a3f47;--panel-2: #2f333a;--accent: #e8b83a;--accent-2: #3d78c9;--go: #5cab5e;--stop: #e2454a;--gut-t: max(10px, env(safe-area-inset-top));--gut-l: max(10px, env(safe-area-inset-left));--gut-r: max(10px, env(safe-area-inset-right));--gut-b: max(10px, env(safe-area-inset-bottom))}html,body,#app{height:100%;overflow:hidden}body{font-family:Segoe UI,system-ui,sans-serif;background:var(--panel-2);color:#e8e4dc;overscroll-behavior:none}#app{position:relative;height:100%}button{font:inherit;border:2px solid var(--ink);border-radius:8px;background:#4a505a;color:#e8e4dc;cursor:pointer;white-space:nowrap;transition:transform .05s,background .15s}button:hover{background:#5a6270}button:active{transform:translateY(1px)}button:disabled{opacity:.35;cursor:default}[hidden]{display:none!important}#stage-wrap{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:var(--panel-2)}#stage{border:3px solid var(--ink);box-shadow:0 8px 30px #00000073;cursor:crosshair;touch-action:none}#stage.running{cursor:default}#hud{position:absolute;top:var(--gut-t);left:var(--gut-l);display:flex;flex-direction:column;align-items:center;gap:7px;z-index:20}#hud button{position:relative;width:46px;height:46px;font-size:19px;line-height:1;display:flex;align-items:center;justify-content:center;border-radius:12px;background:#3a3f47eb;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 3px 10px #0006}#hud button:hover{background:#5a6270f2}#hud .go{background:var(--go);color:#10240f}#hud .go:hover{background:#6fc272}#hud .stop{background:var(--stop);color:#fff}#hud .stop:hover{background:#ee5a5f}#hud .add{background:var(--accent);color:var(--ink);font-weight:800}#hud .add:hover{background:#f3c956}.hud-sep{width:26px;height:1px;background:#ffffff38;margin:1px 0}#add-count{position:absolute;right:-5px;bottom:-5px;min-width:21px;height:21px;padding:0 5px;border:2px solid var(--ink);border-radius:999px;background:var(--ink);color:var(--accent);font-size:11px;font-style:normal;font-weight:800;line-height:17px;text-align:center}#add-count.empty{background:var(--stop);color:#fff}#goal-banner{position:absolute;top:var(--gut-t);left:50%;transform:translate(-50%);max-width:min(64%,620px);background:#2b2118e0;color:#ffe9b3;padding:8px 18px;border-radius:999px;font-size:14px;text-align:center;cursor:pointer;pointer-events:auto;transition:padding .2s,font-size .2s,background .2s,opacity .2s;z-index:15}#goal-banner em{display:block;font-size:12px;font-style:italic;opacity:.75;margin-top:2px}#goal-banner.compact{font-size:12.5px;padding:4px 14px;background:#2b21189e;opacity:.85}#goal-banner.compact em{display:none}#bottom-stack{position:absolute;left:50%;bottom:var(--gut-b);transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;width:max-content;max-width:min(94%,620px);pointer-events:none;z-index:20}#statusbar{max-width:100%;background:#14100ce6;color:#ede6d8;font-size:13px;padding:7px 16px;border-radius:999px;text-align:center;opacity:0;transition:opacity .35s}#statusbar.show{opacity:1}#win-banner{position:absolute;top:42%;left:50%;transform:translate(-50%,-50%);background:var(--go);color:#10240f;font-size:30px;font-weight:800;padding:18px 36px;border:4px solid var(--ink);border-radius:16px;box-shadow:0 10px 40px #00000080;text-align:center;z-index:25;animation:pop-in .35s cubic-bezier(.2,1.6,.4,1)}#win-banner button{display:block;margin:12px auto 0;font-size:16px;padding:8px 16px;background:var(--ink);color:var(--accent)}@keyframes pop-in{0%{transform:translate(-50%,-50%) scale(.4);opacity:0}}#sel-bar{max-width:100%;display:flex;flex-direction:column;gap:4px;padding:7px 9px 8px;border-radius:14px;background:#2e333af5;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 4px 16px #00000080;pointer-events:auto;animation:rise .14s ease-out}.sel-row{display:flex;align-items:center;gap:6px}@keyframes rise{0%{transform:translateY(8px);opacity:0}}#sel-name{flex:1;font-size:13px;font-weight:700;color:var(--accent);padding:0 8px 0 5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#sel-desc{font-size:12px;line-height:1.35;color:#cfc7b8;padding:0 5px 1px;text-align:left;white-space:normal}#sel-bar button{width:38px;height:38px;font-size:16px;display:flex;align-items:center;justify-content:center;border-radius:10px}#sel-bar .danger{background:var(--stop);color:#fff}#sel-bar .danger:hover{background:#ee5a5f}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#14100cb8;display:flex;align-items:center;justify-content:center;padding:max(14px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));z-index:60}.sheet{display:flex;flex-direction:column;background:var(--paper);color:var(--ink);border:4px solid var(--ink);border-radius:16px;width:min(720px,100%);max-height:100%;overflow:hidden;box-shadow:0 20px 60px #00000080;line-height:1.55;animation:pop-in-sheet .16s ease-out}.sheet.narrow{width:min(440px,100%)}@keyframes pop-in-sheet{0%{transform:scale(.94);opacity:0}}.sheet header{display:flex;align-items:center;gap:10px;padding:12px 14px 12px 20px;border-bottom:3px solid var(--ink);background:#e3d7c0}.sheet header h2{font-size:19px;flex:1}.sheet header .note{font-size:12px;color:#6b6154}.sheet .close{width:34px;height:34px;font-size:15px;display:flex;align-items:center;justify-content:center;background:var(--ink);color:var(--paper);border-radius:9px}.sheet-body{padding:16px 20px 20px;overflow-y:auto;-webkit-overflow-scrolling:touch}.sheet-body h3{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:#8a6b21;margin:16px 0 7px}.sheet-body section:first-child h3{margin-top:0}.sheet-body p{font-size:14px;margin-bottom:8px}.sheet-body ul{margin:0 0 8px 18px;font-size:13.5px}.sheet-body li{margin-bottom:4px}.sheet-body .tagline{font-size:13px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#b5761f;margin-bottom:12px}.sheet-body .hint{font-size:12px;line-height:1.45;color:#6b6154}.sheet-body kbd{font:inherit;font-size:11.5px;background:#fff;border:1px solid #b9ac93;border-bottom-width:2px;border-radius:4px;padding:0 5px}.pick-cat{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:#8a6b21;margin:14px 0 7px}.pick-cat:first-child{margin-top:0}.part-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}.part-btn{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 3px 7px;background:#fff;color:var(--ink);border:2px solid #c3b699;border-radius:10px}.part-btn:hover:not(:disabled){background:#fff9ec;border-color:var(--ink)}.part-btn span{font-size:10.5px;font-weight:600;line-height:1.1;text-align:center;max-width:100%;overflow-wrap:anywhere}.part-btn em{position:absolute;top:-7px;right:-6px;min-width:20px;padding:1px 5px;background:var(--ink);color:var(--accent);border-radius:999px;font-size:10.5px;font-style:normal;font-weight:800;text-align:center}.part-btn.active{outline:3px solid var(--accent-2);outline-offset:1px}.picker-empty{font-size:14px;color:#6b6154;padding:10px 0}.link-btn{display:block;width:100%;text-align:left;background:#fff;color:var(--ink);border:2px solid #c3b699;border-radius:10px;padding:10px 14px;margin-bottom:8px}.link-btn:hover{background:#fff9ec;border-color:var(--ink)}.link-btn b{display:block;font-size:15px}.link-btn span{display:block;font-size:12px;color:#6b6154;margin-top:2px;white-space:normal}.menu-body{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:0 20px;align-items:start}.menu-item{display:block;width:100%;text-align:left;font-size:13.5px;padding:9px 12px;margin-bottom:6px;background:#fff;color:var(--ink);border:2px solid #c3b699;border-radius:9px;text-decoration:none}.menu-item:hover{background:#fff9ec;border-color:var(--ink)}#level-list{display:flex;flex-direction:column;gap:5px}.level-item{display:flex;align-items:center;gap:8px;font-size:13.5px;text-align:left;padding:8px 12px;background:#fff;color:var(--ink);border:2px solid #c3b699;border-radius:9px}.level-item:hover{background:#fff9ec;border-color:var(--ink)}.level-item.current{border-color:var(--accent-2);background:#eaf1fb;font-weight:700}.level-item .mark{width:16px;color:var(--accent);font-size:14px}.level-item.solved .mark{color:#b5761f}.slider{display:block;font-size:12.5px;margin-bottom:12px}.slider span{float:right;color:#b5761f;font-weight:700}.slider input[type=range]{width:100%;margin-top:4px;accent-color:var(--accent)}.menu-footer{display:flex;flex-wrap:wrap;gap:8px;padding:12px 20px;border-top:3px solid var(--ink);background:#e3d7c0}.menu-footer .menu-item{width:auto;flex:1 1 auto;margin:0;text-align:center}#rotate-notice{display:none}@media (orientation: portrait) and (pointer: coarse){#rotate-notice{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:32px;background:var(--panel-2);text-align:center}#rotate-notice h2{font-size:21px;margin-bottom:8px;color:var(--accent)}#rotate-notice p{font-size:14px;color:#b9b2a6;max-width:320px}.rot-icon{font-size:56px;margin-bottom:14px;animation:tilt 1.6s ease-in-out infinite}@keyframes tilt{0%,45%,to{transform:rotate(0)}70%,92%{transform:rotate(-90deg)}}}@media (max-height: 460px){#hud{gap:5px}#hud button{width:40px;height:40px;font-size:17px;border-radius:10px}#goal-banner{font-size:12.5px;padding:6px 14px}#sel-bar button{width:34px;height:34px}#win-banner{font-size:22px;padding:14px 26px}}