:root{font-family:Microsoft JhengHei,PingFang TC,sans-serif;color:#224651;background:#c6e0e3;font-synthesis:none;--ink:#224651;--mint:#177f79;--line:#aacbd0;--snow:#f7fbf9;--orange:#f1a333}*{box-sizing:border-box}body{margin:0;overflow:hidden;background:radial-gradient(ellipse at top,#f1faf7,#bedade);height:100dvh}button{font:inherit;cursor:pointer;color:inherit;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:disabled{cursor:default;opacity:.45}button:focus-visible{outline:3px solid #dc941e;outline-offset:2px}button,img{-webkit-user-select:none;user-select:none}#app{max-width:510px;height:100dvh;margin:auto;display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding:max(8px,env(safe-area-inset-top)) 10px max(8px,env(safe-area-inset-bottom));gap:6px;background:#e5f2f2;position:relative}.heading{display:flex;justify-content:space-between;align-items:center;gap:8px}.heading h1{font-size:21px;letter-spacing:2px;margin:0;line-height:1.3}.subtitle{font-size:10px;letter-spacing:1px;color:#5d8188}.tiny-button{border:1px solid var(--line);border-radius:12px;background:#f8fcfa;padding:8px 11px;font-size:12px;min-height:36px}.hud{display:grid;grid-template-columns:43px 1fr auto;gap:9px;align-items:center;margin-top:5px}.portrait{width:43px;height:43px;object-fit:contain;background:#ffedc9;border-radius:12px;padding:3px}.hp-head{display:flex;justify-content:space-between;font-size:12px;font-weight:700;margin-bottom:3px}.hp-track{height:10px;background:#c8dfdf;border:1px solid #95b5b8;border-radius:8px;overflow:hidden}.hp-fill{height:100%;background:#4caaa0;width:100%;border-radius:8px;transition:width .2s}.round-box{text-align:right;font-size:12px;font-weight:700}.round-box small{display:block;color:#6b8990;font-size:10px;font-weight:400}.zone-line{font-size:11px;display:flex;justify-content:space-between;margin-top:5px;color:#5a7e85}.zone-line.danger{color:#ad473e;font-weight:700}#stage{min-height:0;position:relative;overflow:hidden;background:#cbe3e5;border-radius:17px;border:2px solid #aacbd0;box-shadow:0 3px #9ebec230}#canvas-host{position:absolute;inset:0}#canvas-host canvas{display:block}#loading{position:absolute;inset:0;display:grid;place-items:center;background:#e5f2f2;font-size:14px;pointer-events:none}.toast{position:absolute;left:14px;right:14px;bottom:12px;background:#1e454be8;color:#fff;border-radius:12px;padding:8px 10px;text-align:center;font-size:12px;pointer-events:none;opacity:0;transition:opacity .15s;z-index:2}.toast.show{opacity:1}.controls{background:#f4faf8;border:1px solid #b9d1d1;border-radius:16px;padding:8px;box-shadow:0 3px #aec8ca40}.plan-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px;font-size:12px;font-weight:700}.plan-head button{background:none;border:0;font-size:11px;padding:4px;color:#60858d}.queue{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.slot{display:flex;align-items:center;gap:5px;text-align:left;min-height:40px;border:1px dashed #aacbd0;background:#eaf4f2;border-radius:10px;padding:5px;font-size:11px}.slot b{background:#cbdedc;border-radius:50%;width:19px;height:19px;line-height:19px;text-align:center;font-size:10px;flex-shrink:0}.slot.filled{border-style:solid;background:#e0efed}.slot.active{box-shadow:0 0 0 2px #ebaa48;background:#fff0cb}.slot small{font-size:9px;color:#78959a}.mode-row{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:6px}.mode-button{border:1px solid #aac7cc;border-bottom-width:3px;border-radius:10px;background:#fff;min-height:40px;font-weight:700;font-size:12px}.mode-button.selected{background:#d6eee8;border-color:#368a82}.mode-button.attack.selected{background:#e0eefa;border-color:#528cc0}.mode-button.item.selected{background:#efe3f7;border-color:#a578bf}.hint{min-height:19px;font-size:10px;color:#5b7b85;margin:4px 0;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.bottom-row{display:grid;grid-template-columns:1fr 1fr 1.8fr;gap:5px}.utility,.confirm{border:1px solid #aac7cc;background:#e8f2f1;border-radius:10px;min-height:40px;font-size:12px;font-weight:700}.confirm{background:#197e76;border-color:#0c625e;color:#fff;box-shadow:0 2px #0c625e}.confirm:disabled{opacity:.65}.credits{text-align:center;font-size:9px;color:#73939a;letter-spacing:1px;margin:5px 0 -2px}dialog{width:min(470px,calc(100vw - 24px));max-height:88dvh;padding:15px;background:#f2f9f6;color:var(--ink);border:2px solid #93b5bc;border-radius:20px;overflow:auto;box-shadow:0 14px 55px #173c4c60}dialog::backdrop{background:#173c4b80}.modal-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}.modal-head h2{margin:0;font-size:19px}.close{border:0;background:#d8eae7;border-radius:50%;height:32px;width:32px;font-size:18px}.muted{font-size:12px;color:#6b858b;line-height:1.6}.inventory-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.inventory-cell{border:1px solid #b7cecd;background:#fff;border-radius:12px;padding:7px;min-height:106px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px}.inventory-cell img{width:52px;height:52px;border-radius:6px;object-fit:contain}.inventory-cell.empty{border-style:dashed;background:#e7f0ed;justify-content:center;color:#8ca2a2}.inventory-cell small{font-size:9px;color:#66898e}.item-count{font-weight:700}.equipment-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:9px}.equipment-cell{border:1px solid #c2d4d0;border-radius:8px;min-height:58px;display:flex;align-items:center;padding:5px;gap:4px;font-size:10px}.equipment-cell img{width:34px;height:34px;border-radius:4px}.stats-row{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0;font-size:10px}.stats-row span{background:#dcecea;padding:4px 7px;border-radius:7px}.modal-actions{display:flex;gap:7px;margin-top:14px}.modal-actions button{flex:1;min-height:40px;border:1px solid #a5bfc4;border-radius:9px;background:#e1efeb;font-size:12px}.modal-actions .primary{background:#197e76;color:#fff}.compare{display:grid;grid-template-columns:1fr 1fr;gap:10px}.compare-card{background:#fff;padding:10px;border:1px solid #bed0cd;border-radius:12px;text-align:center;font-size:12px}.compare-card img{width:66px;height:66px;object-fit:contain;border-radius:8px}.compare-card h3{font-size:13px;margin:7px 0}.compare-card p{font-size:11px;line-height:1.7;margin:2px 0}.result{text-align:center;padding:12px}.result img{width:120px;height:120px;object-fit:contain}.result h2{font-size:28px;letter-spacing:3px;margin:8px}.help-list{font-size:13px;line-height:1.8;padding-left:21px}.full-map{width:100%;aspect-ratio:1;display:block;background:#e8f5f3}.log-list{font-size:11px;line-height:1.8;max-height:200px;overflow:auto}.badge{font-size:10px;padding:4px 7px;border-radius:7px;background:#e1eae8}.modal-select{width:100%;padding:8px;font:inherit;margin-top:8px;border-radius:8px;border:1px solid #acc7c5}@media(max-height:700px){#app{gap:4px;padding-top:4px;padding-bottom:4px}.heading h1{font-size:17px}.subtitle,.credits{display:none}.hud{margin-top:3px}.portrait{width:34px;height:34px}.hud{grid-template-columns:34px 1fr auto}.zone-line{margin-top:3px;font-size:10px}.controls{padding:6px}.mode-button,.utility,.confirm{min-height:35px}.slot{min-height:34px}.hint{min-height:15px;font-size:9px;margin:3px 0}.plan-head{margin-bottom:3px}.mode-row{margin-top:4px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}