@charset "UTF-8";
:root{color-scheme:dark;--bg:#101b20;--panel:#19272b;--panel2:#213135;--line:#35464a;--mint:#b5e9b8;--muted:#9baeb1;--text:#edf1df;--amber:#dec28a;--font:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:14px/1.65 var(--font);-webkit-font-smoothing:antialiased}button,input,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit;border:1px solid transparent;background:none;touch-action:manipulation}button:active{transform:translateY(1px)}button:focus-visible,a:focus-visible,canvas:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--mint);outline-offset:3px}button:disabled{cursor:default;opacity:.4}a{color:inherit;text-decoration:none}h1,h2,h3,p{margin:0}button,canvas,input{user-select:none}small{font-size:11px}button[hidden],div[hidden],span[hidden]{display:none!important}.shell{max-width:1376px;margin:auto;padding:0 40px 20px}.masthead{display:flex;align-items:center;justify-content:space-between;gap:20px;height:111px;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:14px}.brand canvas{width:40px;height:44px;image-rendering:pixelated}.brand-kicker{font:9px/1.6 "Courier New",monospace;letter-spacing:2px;color:var(--mint)}h1{font-size:25px;letter-spacing:2px;line-height:1.5;font-weight:900}.brand-dot{color:var(--mint)}.header-actions{display:flex;align-items:center;gap:10px}.edition{font:9px "Courier New",monospace;letter-spacing:1px;color:var(--muted);margin-right:20px}.edition span{margin-left:10px;color:var(--mint)}.subtle,.circle{min-height:44px;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:8px 14px}.subtle small{color:var(--mint);margin-left:10px}.circle{min-width:44px;padding:4px;font-size:19px}.stage-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:26px 0 24px}.level-intro{display:flex;align-items:center;gap:22px}.level-number{font:60px/.9 "Courier New",monospace;font-weight:700;color:#637d73;letter-spacing:-5px}.eyebrow{font-size:10px;letter-spacing:2px;color:var(--mint);font-weight:700}h2{font-size:23px;line-height:1.5;letter-spacing:1px}.level-intro p{font-size:12px;color:var(--muted);margin-top:2px}.level-goal{display:flex;gap:10px;align-items:center;color:var(--muted);font-size:10px;letter-spacing:1px}.level-goal strong{display:block;font-size:14px;letter-spacing:0;color:var(--text);margin-top:1px}.status-dot{width:7px;height:7px;background:var(--mint);border-radius:50%}.game-frame{border:1px solid #536460;border-radius:9px;overflow:hidden;background:#142228;box-shadow:0 12px 30px #07101350}.hud{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 15px;height:48px;background:#21312e;border-bottom:1px solid #3a4d47}.hud-stats{display:flex;align-items:center;gap:28px;white-space:nowrap}.hud-stats>span{color:#b7c6bd;font-size:10px;display:flex;align-items:center;gap:7px}.hud strong{font:700 20px "Courier New",monospace;letter-spacing:1px;color:var(--text)}.hud #rescued{color:var(--mint)}.hud small{font:12px "Courier New",monospace;color:#8da29a}.hud .clock{padding-left:26px;border-left:1px solid #405149}.hud .clock strong{font-size:17px}.transport{display:flex;gap:5px}.transport button{min-width:40px;min-height:40px;border-radius:5px;font-size:18px;font-family:monospace}.transport button[aria-pressed=true]{background:var(--mint);color:var(--bg)}.transport button:hover{background:#3f544b}.viewport{position:relative;height:clamp(320px,33.4vw,448px);overflow:hidden;background:#122329}.viewport>canvas{display:block;image-rendering:pixelated;width:100%;height:100%;touch-action:none;cursor:crosshair}.scene-label{position:absolute;top:15px;left:18px;pointer-events:none;font:9px "Courier New",monospace;letter-spacing:1.8px;color:#96aa99}.zoom{position:absolute;right:12px;top:10px;min-height:44px;padding:4px 10px;background:#102127d9;border:1px solid #40594e;border-radius:5px;color:#bdd0b8;font-size:11px}.ready-panel{position:absolute;left:50%;top:43%;transform:translate(-50%,-50%);width:350px;padding:25px 30px;background:#15262bf2;border:1px solid #5e7c68;box-shadow:0 8px 0 #0b181d77;text-align:center}.ready-panel .eyebrow{font:9px "Courier New",monospace;letter-spacing:2px}.ready-panel h3{font-size:28px;margin:10px 0 9px;letter-spacing:1px}.ready-panel p{font-size:12px;color:#bac8bf;line-height:1.9}.primary{background:var(--mint);color:#172d28;min-height:46px;padding:10px 20px;font-weight:800;border-radius:5px;letter-spacing:.5px}.primary:hover{background:#d4f2be}.ready-panel .primary{display:flex;align-items:center;justify-content:space-between;width:100%;margin:21px 0 10px}.ready-panel small{color:#91a699;font-size:10px}.pause-label{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);background:#14272aeb;color:var(--mint);padding:5px 12px;border-radius:4px;white-space:nowrap;font-size:11px;pointer-events:none}.camera-bar{min-height:44px;display:flex;align-items:center;gap:14px;padding:0 14px;background:#19292d;border-top:1px solid #344a46}.map-label{font-size:10px;color:var(--muted);white-space:nowrap}.camera-bar canvas{width:240px;max-width:35%;height:30px;image-rendering:pixelated;cursor:ew-resize;touch-action:none}.camera-actions{margin-left:auto;display:flex;align-items:center;gap:14px;color:var(--muted)}.camera-actions button{flex-shrink:0;width:40px;min-height:40px;font-size:17px}.drag-tip{font-size:10px}.toolbox{margin-top:20px;background:var(--panel);border:1px solid #314448;border-radius:8px;padding:13px 15px 10px}.toolbox-title{display:flex;align-items:center;gap:12px;font-size:11px;font-weight:700;margin-bottom:11px;color:#cad3c4}.toolbox-title small{font:10px "Courier New",monospace;color:var(--muted);font-weight:400}.permanent-note{margin-left:auto;font-weight:400;font-size:10px;color:var(--muted)}.skills{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}.skill{position:relative;border:1px solid #42534f;border-radius:6px;min-height:77px;padding:7px 4px 8px;display:grid;grid-template-columns:1fr auto;grid-template-rows:29px 20px;column-gap:0;align-items:center;background:#223230}.skill.selected{border-color:var(--mint);background:#33483d;box-shadow:0 0 0 1px var(--mint)}.skill.empty{background:#1b292c;border-color:#2e3d40;color:#778e8b}.skill.unavailable .count{color:#718480}.skill-icon{font:26px/1 monospace;color:var(--amber);text-align:center;padding-left:12px}.skill.empty .skill-icon{color:#667b73}.skill-key{position:absolute;left:7px;top:4px;font:9px monospace;color:#819a8d}.skill-name{grid-column:1/-1;font-size:11px;font-weight:700;text-align:center;white-space:nowrap}.count{font:700 19px "Courier New",monospace;color:var(--mint);padding-right:8px}.tool-info{display:flex;justify-content:space-between;gap:16px;color:#b6c8ba;font-size:11px;padding:10px 2px 0;min-height:29px}.selection-tip{color:#819a91;white-space:nowrap}.game-footer{display:flex;align-items:center;justify-content:space-between;margin-top:5px;gap:10px}.game-footer>div{display:flex;align-items:center;gap:18px}.text-button{min-height:44px;padding:7px 0;font-size:12px;color:#c7d7bc}.text-button:hover{color:var(--mint)}.footer-note{font-size:10px;color:#839b91}.hint{padding:13px 17px;border:1px solid #445c4b;background:#1e302d;border-radius:6px;font-size:12px;color:#c6d7bb}.message{min-height:27px;font-size:12px;text-align:center;color:var(--mint);padding:3px 0}.message.error{color:#edb395}.bottom-note{display:flex;align-items:center;justify-content:space-between;color:#607e74;font:9px "Courier New",monospace;letter-spacing:1.3px;padding-top:10px;border-top:1px solid #293e3d}.bottom-note span:last-child{font-family:var(--font);letter-spacing:0}.target-picker{position:relative;margin:12px 0;padding:12px;background:#233c35;border:1px solid var(--mint);border-radius:6px;font-size:12px}.target-picker>strong{display:block;margin-bottom:8px}.target-picker #target-options{display:flex;flex-wrap:wrap;gap:6px}.target-picker button{background:#1b2d2c;min-height:44px;min-width:80px;border:1px solid #587262;border-radius:5px;padding:6px 12px}.target-picker #target-close{position:absolute;right:7px;top:6px;min-width:60px;background:none}.target-picker button:hover{background:#395542}dialog{color:var(--text);background:#19292d;border:1px solid #5c746b;border-radius:12px;width:min(900px,calc(100% - 28px));max-height:88dvh;padding:27px 30px;box-shadow:0 24px 100px #0008}dialog::backdrop{background:#071319c9;backdrop-filter:blur(3px)}.dialog-header{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:13px}dialog>p{color:#adc1b6;font-size:12px;margin:12px 0 18px}.level-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.level-card{padding:0;overflow:hidden;border:1px solid #41564e;border-radius:6px;text-align:left;background:#20322f;min-height:110px}.level-card.current{border-color:var(--mint)}.level-card canvas{width:100%;height:50px;image-rendering:pixelated;display:block}.level-card .level-card-body{padding:10px 12px;display:flex;gap:10px;align-items:center}.level-card b{font:20px "Courier New",monospace;color:var(--mint)}.level-card strong{display:block;font-size:12px}.level-card small{font-size:10px;color:#a4b7a7}.level-card .check{margin-left:auto;color:var(--mint)}.help-skills{display:grid;grid-template-columns:1fr 1fr;gap:10px}.help-skills>div{padding:10px 12px;background:#233832;border-radius:6px}.help-skills b{font-size:12px;color:var(--mint)}.help-skills span{display:block;font-size:11px;color:#b5c9bc;margin-top:3px}.keyboard-guide{display:flex;flex-wrap:wrap;gap:12px;font-size:11px}kbd{background:#35493e;padding:3px 7px;border-radius:3px;font:11px monospace}#help-done{width:100%;margin-top:6px}#sound-dialog{max-width:440px}.volume-label{display:flex;justify-content:space-between;margin:22px 0 5px}input[type=range]{width:100%;accent-color:var(--mint);min-height:44px;cursor:pointer}#audio-status{display:block;color:var(--muted);margin-top:10px}#result-dialog{max-width:520px;text-align:center}.result-mark{font-size:46px;color:var(--mint);line-height:1.4}.result-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:17px 0 22px}.result-stats strong{display:block;font:700 38px "Courier New",monospace;color:var(--mint)}.result-stats span{font-size:11px;color:#a3bbae}.result-actions{display:grid;gap:9px}#result-title{font-size:23px}#result-kicker{font:10px "Courier New",monospace;letter-spacing:2px}#result-dialog .dialog-header{margin-bottom:5px}
@media(hover:hover){.skill:hover{border-color:#91b59b}.level-card:hover{background:#2e4539}.subtle:hover,.circle:hover{background:#344c40}}
@media(min-width:1600px){.shell{max-width:1510px}.viewport{height:490px}}
@media(max-width:1000px){.shell{padding:0 24px 20px}.edition{display:none}.hud-stats{gap:18px}.level-grid{gap:10px}.level-number{font-size:52px}.stage-heading{padding:22px 0}.skill-name{font-size:10px}.skills{gap:6px}.skill-icon{padding-left:8px}.count{padding-right:4px}.viewport{height:370px}.toolbox{margin-top:16px}.footer-note{display:none}}
@media(max-width:650px){.shell{padding:0 14px 16px}.masthead{height:87px;gap:6px}.brand{gap:8px}.brand canvas{width:28px;height:32px}.brand-kicker{font-size:6px;letter-spacing:1px}h1{font-size:18px;letter-spacing:1px}.header-actions{gap:5px}.header-actions .subtle{font-size:11px;padding:4px 9px}.header-actions .subtle small{display:none}.header-actions .circle{min-width:44px;font-size:17px}.level-goal{display:none}.stage-heading{padding:17px 0 16px}.level-intro{gap:15px}.level-number{font-size:48px}h2{font-size:19px}.eyebrow{font-size:8px;letter-spacing:1px}.level-intro p{font-size:10px;margin-top:3px}.hud{padding:0 8px;height:47px;gap:0}.hud-stats{gap:11px}.hud-stats>span{gap:4px;font-size:9px}.hud strong{font-size:17px}.hud small{font-size:10px}.hud .lost-stat{display:none}.hud .clock{padding:0;border:0}.hud .clock strong{font-size:14px}.transport{gap:0}.transport button{min-width:44px;min-height:44px;font-size:16px}.viewport{height:330px}.scene-label{font-size:8px;left:12px;top:14px}.zoom{font-size:10px;right:8px;min-height:44px}.ready-panel{width:calc(100% - 40px);max-width:330px;top:43%;padding:19px 22px}.ready-panel h3{font-size:24px}.ready-panel p{font-size:11px}.ready-panel .primary{margin-top:17px;font-size:12px}.camera-bar{padding:0 7px;gap:8px}.map-label{display:none}.camera-bar canvas{max-width:none;width:54%;height:27px}.camera-actions{gap:1px}.drag-tip{font-size:8px}.camera-actions button{width:44px;min-height:44px}.toolbox{margin-top:13px;padding:11px 10px 8px}.toolbox-title{font-size:10px;margin-bottom:9px}.toolbox-title small{display:none}.permanent-note{font-size:9px}.skills{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.skill{min-height:63px;grid-template-rows:24px 17px;padding:5px 2px}.skill-name{font-size:10px}.skill-icon{font-size:23px;padding-left:12px}.count{font-size:17px;padding-right:8px}.skill-key{font-size:8px}.tool-info{font-size:10px;min-height:36px;line-height:1.5}.selection-tip{display:none}.game-footer{font-size:10px;margin-top:2px}.text-button{font-size:11px}.bottom-note{font-size:7px;letter-spacing:.6px}.bottom-note span:last-child{font-size:8px}.message{font-size:11px}.level-grid{grid-template-columns:repeat(2,1fr);gap:9px}dialog{padding:20px 17px}.level-card .level-card-body{padding:8px;gap:8px}.level-card strong{font-size:10px}.level-card small{font-size:9px}.help-skills{gap:8px}.help-skills>div{padding:9px}.help-skills b{font-size:11px}.help-skills span{font-size:10px}.pause-label{font-size:9px}.target-picker{font-size:11px}.target-picker button{min-width:65px;padding:6px 9px}.target-picker>strong{max-width:70%}}
@media(max-width:350px){.camera-actions .drag-tip{display:none}.shell{padding:0 8px 12px}.brand-kicker{font-size:5px}h1{font-size:16px}.brand canvas{width:25px}.header-actions{gap:1px}.header-actions .subtle{padding:3px 5px}.header-actions .circle{min-width:40px}.hud-stats{gap:4px}.hud-stats>span{gap:2px}.hud strong{font-size:14px}.transport button{min-width:44px}.viewport{height:305px}.ready-panel{width:calc(100% - 24px)}.skill-name{font-size:9px}.bottom-note{gap:6px}}
@media(max-height:500px) and (min-width:651px){.masthead{height:74px}.stage-heading{padding:13px 0}.viewport{height:300px}}
@media(prefers-reduced-motion:no-preference){dialog[open]{animation:enter 160ms cubic-bezier(.16,1,.3,1)}@keyframes enter{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}}