:root{--bg-dark: #1a1a1c;--bg-panel: #2a2a2e;--bg-card: #333338;--border: #4a4a50;--text: #e8e6e3;--text-dim: #9a9895;--accent: #c9a227;--accent-hover: #e0b83d;--success: #4a7c4e;--danger: #8b3a3a;--font: "Segoe UI", system-ui, sans-serif}*{box-sizing:border-box}body{margin:0;font-family:var(--font);background:var(--bg-dark);color:var(--text);min-height:100vh;-webkit-font-smoothing:antialiased}#app{max-width:480px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column}.top-bar{background:var(--bg-panel);border-bottom:2px solid var(--border);padding:.75rem 1rem;display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}.stat{display:flex;align-items:center;gap:.35rem;font-size:.9rem}.stat-label{color:var(--text-dim);font-size:.75rem}.stat-value{font-weight:600;color:var(--accent)}.xp-bar{width:80px;height:8px;background:var(--bg-card);border-radius:4px;overflow:hidden}.xp-fill{height:100%;background:var(--accent);border-radius:4px;transition:width .2s}.main-content{flex:1;padding:1rem;overflow-y:auto}.nav-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;margin-top:1rem}.nav-btn{background:var(--bg-card);border:2px solid var(--border);color:var(--text);padding:1rem;font-size:1rem;font-weight:600;cursor:pointer;border-radius:6px;transition:background .15s,border-color .15s}.nav-btn:hover{background:var(--bg-panel);border-color:var(--accent)}.nav-btn:active{transform:scale(.98)}.screen{display:none}.screen.active{display:block}.screen-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}.screen-title{font-size:1.25rem;font-weight:700}.back-btn{background:transparent;border:1px solid var(--border);color:var(--text);padding:.4rem .8rem;font-size:.85rem;cursor:pointer;border-radius:4px}.back-btn:hover{border-color:var(--accent)}.mission-card{background:var(--bg-card);border:1px solid var(--border);border-radius:6px;padding:1rem;margin-bottom:.75rem}.mission-card.locked{opacity:.6}.mission-name{font-weight:600;margin-bottom:.35rem}.mission-meta{font-size:.8rem;color:var(--text-dim);margin-bottom:.5rem}.mission-rewards{font-size:.85rem;color:var(--accent)}.run-btn{margin-top:.5rem;background:var(--accent);border:none;color:var(--bg-dark);padding:.5rem 1rem;font-weight:600;cursor:pointer;border-radius:4px}.run-btn:hover:not(:disabled){background:var(--accent-hover)}.run-btn:disabled{opacity:.5;cursor:not-allowed}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:100;padding:max(1rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) max(1rem,env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left));overflow-y:auto;-webkit-overflow-scrolling:touch}.modal{background:var(--bg-panel);border:2px solid var(--border);border-radius:8px;padding:1.25rem;max-width:min(420px,calc(100vw - 2rem));width:100%;max-height:calc(100vh - 2rem);max-height:calc(100dvh - 2rem);overflow-y:auto;-webkit-overflow-scrolling:touch;margin:auto}.modal-title{font-size:1.1rem;font-weight:700;margin-bottom:1rem}.modal-actions{display:flex;gap:.5rem;margin-top:1rem}.modal-actions button{flex:1;padding:.6rem;min-height:44px;font-weight:600;cursor:pointer;border-radius:4px;border:none;touch-action:manipulation}.modal-confirm{background:var(--accent);color:var(--bg-dark)}.modal-cancel{background:var(--bg-card);color:var(--text);border:1px solid var(--border)}.mission-detail-modal{max-width:min(440px,calc(100vw - 2rem))}.mission-detail-subtitle{color:var(--text-dim);font-size:.9rem;margin:-.5rem 0 1rem}.mission-steps-timeline{display:flex;flex-direction:column;gap:.75rem;margin:1rem 0}.mission-step-row{display:flex;gap:.75rem;padding:.75rem;background:var(--bg-card);border-radius:6px;border:1px solid var(--border)}.mission-step-row.step-completed{border-color:var(--success);opacity:.9}.mission-step-row.step-current{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.mission-step-row.step-locked{opacity:.6}.step-status{flex-shrink:0;width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1rem}.step-completed .step-status{color:var(--success)}.step-current .step-status{color:var(--accent)}.step-locked .step-status{color:var(--text-dim)}.step-info{flex:1;min-width:0}.step-name{font-weight:600;margin-bottom:.25rem}.step-meta{font-size:.85rem;color:var(--text-dim);margin-bottom:.5rem}.view-step-btn,.run-step-btn{margin-top:.5rem;padding:.5rem 1rem;font-size:.9rem;font-weight:600;background:var(--accent);color:var(--bg-dark);border:none;border-radius:4px;cursor:pointer}.view-step-btn{background:var(--bg-card);color:var(--text);border:1px solid var(--border)}.view-step-btn:hover{border-color:var(--accent);color:var(--accent)}.run-step-btn:disabled{opacity:.5;cursor:not-allowed}.mission-detail-rewards{font-size:.9rem;color:var(--text-dim);margin-top:.5rem}.mission-step-forces{margin-top:.5rem}.mission-step-forces .battle-unit-card{font-size:.7rem;padding:.2rem .35rem}.filter-btn{background:var(--bg-card);border:1px solid var(--border);color:var(--text);padding:.4rem .8rem;font-size:.85rem;cursor:pointer;border-radius:4px;margin-right:.25rem}.filter-btn:hover,.filter-btn.active{border-color:var(--accent);color:var(--accent)}.dev-tools-card{border-color:var(--accent);opacity:.95}.dev-btn{font-size:.85rem;padding:.4rem .6rem}.mission-resolve-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:200;padding:1rem;padding:max(1rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) max(1rem,env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left));overflow-y:auto;animation:resolveFadeIn .2s ease-out}@keyframes resolveFadeIn{0%{opacity:0}to{opacity:1}}.mission-resolve-panel{background:var(--bg-panel);border:2px solid var(--accent);border-radius:12px;padding:1.5rem;width:min(90%,calc(100vw - 2rem));max-width:340px;box-shadow:0 0 30px #c9a22733}.mission-resolve-title{font-size:1.1rem;font-weight:700;text-align:center;margin-bottom:.5rem;color:var(--accent)}.mission-resolve-status{font-size:.9rem;color:var(--text-dim);text-align:center;margin-bottom:1.25rem;min-height:1.2em}.mission-resolve-bar{height:12px;background:var(--bg-dark);border-radius:6px;overflow:hidden;border:1px solid var(--border)}.mission-resolve-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-hover));border-radius:6px;width:0%;transition:width .05s linear}.mission-resolve-fill.animating{transition:width 2s cubic-bezier(.25,.46,.45,.94)}@keyframes shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-4px)}20%,40%,60%,80%{transform:translate(4px)}}@keyframes resolveShake{0%,to{transform:translate(0)}25%{transform:translate(-3px)}75%{transform:translate(3px)}}@keyframes shakeHeavy{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-8px)}20%,40%,60%,80%{transform:translate(8px)}}@keyframes successPulse{0%,to{box-shadow:0 0 #4a7c4e66}50%{box-shadow:0 0 20px 4px #4a7c4e4d}}@keyframes failPulse{0%,to{box-shadow:0 0 #8b3a3a66}50%{box-shadow:0 0 20px 4px #8b3a3a4d}}.modal.shake,.mission-resolve-panel.shake,.battle-staging-panel.shake{animation:shake .4s ease-out}.modal.shake-heavy{animation:shakeHeavy .6s ease-out}.modal.success-reveal{animation:successPulse .8s ease-out}.modal.fail-reveal{animation:failPulse .8s ease-out}.battle-staging-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000e6;display:flex;align-items:center;justify-content:center;z-index:200;padding:1rem;padding:max(1rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) max(1rem,env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left));overflow-y:auto;-webkit-overflow-scrolling:touch;animation:resolveFadeIn .2s ease-out}.battle-staging-panel{background:var(--bg-panel);border:2px solid var(--border);border-radius:12px;padding:1rem;width:min(95%,calc(100vw - 2rem));max-width:420px;max-height:calc(100vh - 2rem);max-height:calc(100dvh - 2rem);overflow-y:auto;-webkit-overflow-scrolling:touch;box-shadow:0 0 40px #00000080;opacity:0;transform:scale(.9);transition:opacity .35s ease-out,transform .35s ease-out}.battle-staging-panel.battle-staging-visible{opacity:1;transform:scale(1)}.battle-staging-title{font-size:1.1rem;font-weight:700;text-align:center;margin-bottom:1rem;color:var(--accent)}.battle-staging-forces{display:flex;align-items:stretch;gap:.75rem;margin-bottom:1rem}.battle-side{flex:1;display:flex;flex-direction:column;align-items:center;padding:.75rem;border-radius:8px;min-height:120px}.battle-side-player{background:#4a7c4e26;border:1px solid rgba(74,124,78,.4)}.battle-side-enemy{background:#8b3a3a26;border:1px solid rgba(139,58,58,.4)}.battle-side-label{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5rem}.battle-side-player .battle-side-label{color:var(--success)}.battle-side-enemy .battle-side-label{color:var(--danger)}.battle-units-list{display:flex;flex-direction:column;gap:.35rem;flex:1;width:100%}.battle-unit-card{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;padding:.35rem .5rem;border-radius:6px;font-size:.8rem}.battle-unit-player{background:#0003;border:1px solid rgba(74,124,78,.3)}.battle-unit-enemy{background:#0003;border:1px solid rgba(139,58,58,.3)}.battle-unit-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.battle-unit-count{font-weight:700;color:var(--accent)}.battle-unit-stats{width:100%;font-size:.7rem;color:var(--text-dim)}.battle-side-total{font-size:.75rem;font-weight:600;color:var(--text-dim);margin-top:.5rem}.battle-vs{display:flex;align-items:center;justify-content:center;min-width:36px}.battle-vs-text{font-size:1rem;font-weight:800;color:var(--accent);text-shadow:0 0 8px rgba(201,162,39,.5)}.battle-staging-status{font-size:.9rem;color:var(--text-dim);text-align:center;min-height:1.2em}.battle-staging-overlay.battle-staging-resolving .battle-staging-panel{opacity:0;transform:scale(1.05);transition:opacity .2s ease-out,transform .2s ease-out}.mission-confirm-modal{max-width:420px}.mission-intel-forces{margin:1rem 0}.mission-intel-forces .battle-staging-forces{margin:0}.mission-intel-forces .battle-side{min-height:80px;padding:.5rem}.mission-intel-forces .battle-unit-card{padding:.25rem .4rem;font-size:.75rem}.mission-power{font-size:.85rem;color:var(--accent);margin:.35rem 0;font-weight:600}.success-chance-row{display:flex;align-items:center;gap:.5rem;margin:.5rem 0}.success-chance-label{font-size:.75rem;color:var(--text-dim);white-space:nowrap}.success-chance-bar{flex:1;height:10px;background:var(--bg-dark);border-radius:5px;overflow:hidden;border:1px solid var(--border)}.success-chance-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-hover));border-radius:5px;transition:width .3s ease-out}.success-chance-value{font-size:.75rem;font-weight:700;color:var(--accent);min-width:2.5em}.success-chance-modal{margin:.75rem 0}.skirmish-diff-grid{display:flex;flex-direction:column;gap:.75rem;margin-top:.75rem}.skirmish-diff-card{display:flex;flex-direction:column;gap:.35rem}.skirmish-diff-card .run-btn{margin-top:0}@media (max-width: 420px){.modal{padding:1rem}.modal-title{font-size:1rem}.modal-actions button{min-height:44px;padding:.75rem}.battle-staging-forces,.mission-intel-forces .battle-staging-forces{flex-direction:column;gap:.5rem}.battle-vs{min-width:auto;padding:.25rem 0}.battle-vs-text{font-size:.9rem}.battle-side{min-height:70px;padding:.5rem}.battle-unit-card{font-size:.75rem;padding:.3rem .4rem}.battle-unit-name{white-space:normal;overflow:visible;text-overflow:unset;word-break:break-word}.mission-intel-forces .battle-unit-card{font-size:.7rem}.battle-staging-panel{padding:.75rem}.battle-staging-title{font-size:1rem}}