:root{--bg-primary: #0a0a0f;--bg-secondary: #141420;--bg-card: #1a1a2e;--bg-input: #222240;--text-primary: #e0d8c8;--text-secondary: #a09888;--text-muted: #6a6278;--accent: #c9a84c;--accent-glow: #f0d060;--hp-color: #e04040;--mp-color: #4080e0;--exp-color: #40c060;--danger: #d04040;--success: #40b060;--info: #60a0d0;--border: #2a2a3a;--border-glow: #3a3040;--font-main: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;height:100dvh;overflow:hidden;font-family:var(--font-main);background:var(--bg-primary);color:var(--text-primary);font-size:14px;line-height:1.5;-webkit-tap-highlight-color:transparent}#app{display:flex;flex-direction:column;height:100vh;height:100dvh;max-width:480px;margin:0 auto;border-left:1px solid var(--border);border-right:1px solid var(--border);background:var(--bg-primary)}#status-bar{padding:4px 12px;background:var(--bg-secondary);border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:3px}#status-bar>div{display:flex;align-items:center;gap:8px}#status-bar .label{width:32px;font-size:12px;color:var(--text-secondary);text-align:right}#status-bar .bar{flex:1;height:14px;background:var(--bg-input);border-radius:7px;overflow:hidden;border:1px solid var(--border)}#status-bar .fill{height:100%;border-radius:7px;transition:width .3s ease}.hp-fill{background:linear-gradient(90deg,#c03030,#e04040)}.mp-fill{background:linear-gradient(90deg,#3050c0,#4080e0)}.exp-fill{background:linear-gradient(90deg,#308040,#40c060)}#status-bar .val{width:65px;font-size:12px;text-align:left;color:var(--text-primary)}#player-info{display:flex;justify-content:space-between;align-items:center;padding:6px 12px;background:var(--bg-card);border-bottom:1px solid var(--border);font-size:13px}#realm-name{color:var(--accent);font-weight:700}#resources{color:var(--text-secondary)}#combat-panel{padding:8px 12px;background:linear-gradient(90deg,#2a1010,#1a1a2e);border-bottom:1px solid var(--danger);display:flex;justify-content:space-between;animation:pulse-border 1.5s ease-in-out infinite}#combat-panel.hidden{display:none}@keyframes pulse-border{0%,to{border-color:var(--danger)}50%{border-color:#f66}}#enemy-name{color:#f88;font-weight:700}#enemy-hp{color:#faa}#log-area{flex:1;min-height:0;overflow-y:auto;padding:4px 12px;background:var(--bg-primary)}#log-content{display:flex;flex-direction:column;gap:2px}.log-entry{padding:4px 8px;border-radius:4px;font-size:13px;animation:fadeIn .2s ease;border-left:2px solid transparent}@keyframes fadeIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.log-entry.combat{color:#db8;border-left-color:#db8;background:#c8a03c0d}.log-entry.success{color:var(--success);border-left-color:var(--success);background:#40b0600d}.log-entry.danger{color:var(--danger);border-left-color:var(--danger);background:#d040400d}.log-entry.info{color:var(--info);border-left-color:var(--info);background:#60a0d00d}#action-area{background:var(--bg-secondary);border-top:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;padding-bottom:env(safe-area-inset-bottom,0px)}.tab-nav{display:flex;border-bottom:1px solid var(--border)}.tab-btn{flex:1;padding:8px 2px;background:none;border:none;color:var(--text-secondary);font-size:12px;cursor:pointer;transition:all .2s;font-family:var(--font-main);border-bottom:2px solid transparent}.tab-btn.active{color:var(--accent);border-bottom-color:var(--accent)}.tab-btn:hover{color:var(--accent-glow)}.tab-panel{display:none;flex-direction:column;gap:4px;padding:8px 10px;max-height:35vh;max-height:35dvh;overflow-y:auto}.tab-panel.active{display:flex}.action-btn{padding:10px 14px;background:var(--bg-card);border:1px solid var(--border);border-radius:6px;color:var(--text-primary);font-size:13px;cursor:pointer;transition:all .15s;font-family:var(--font-main);text-align:center}.action-btn:active{transform:scale(.97);filter:brightness(1.3)}.action-btn.primary{background:linear-gradient(135deg,#3a3040,#4a3a30);border-color:var(--accent);color:var(--accent-glow);font-weight:700}.action-btn.danger{border-color:var(--danger);color:var(--danger)}.action-btn.disabled{opacity:.4;pointer-events:none}.action-btn.skill-btn{border-color:#4060a0;color:#80a0e0}.action-btn.combat-btn{border-color:var(--accent);color:var(--accent)}.action-btn.heal-btn{border-color:var(--success);color:var(--success)}.action-btn.auto-btn{border-color:#c08040;color:#c08040}.action-btn.auto-btn.active{background:linear-gradient(135deg,#3a2010,#4a3020);border-color:#f0a040;color:#f0a040;animation:pulse-auto 2s ease-in-out infinite}@keyframes pulse-auto{0%,to{border-color:#c08040}50%{border-color:#f0a040}}.combat-actions{display:flex;flex-direction:column;gap:6px}.area-info{padding:8px;background:var(--bg-card);border-radius:6px}.area-info p{margin-bottom:4px;font-size:13px}.player-stats-card{padding:8px;background:var(--bg-card);border-radius:6px;font-size:12px;color:var(--text-secondary)}.section-title{font-size:14px;font-weight:700;color:var(--accent);padding:6px 0;border-bottom:1px solid var(--border);margin-top:6px}.craft-rate{font-size:11px;color:var(--text-muted)}.inventory-grid{display:flex;flex-wrap:wrap;gap:6px}.inv-item{padding:4px 10px;background:var(--bg-input);border-radius:12px;font-size:12px;color:var(--text-secondary)}.equip-slots{display:flex;flex-direction:column;gap:6px}.equip-slot{padding:8px 12px;border-radius:6px;display:flex;justify-content:space-between;align-items:center;font-size:13px}.equip-slot.filled{background:var(--bg-card);border:1px solid var(--border-glow)}.equip-slot.empty{background:var(--bg-input);border:1px dashed var(--border)}.slot-label{color:var(--text-secondary);font-size:12px}.empty-text{color:var(--text-muted);font-style:italic}.shop-desc{font-size:11px;color:var(--text-muted)}.shop-btn{display:flex;justify-content:space-between;align-items:center}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;display:flex;justify-content:center;align-items:center;z-index:100;animation:fadeIn .2s ease}.modal{background:var(--bg-secondary);border:1px solid var(--border-glow);border-radius:10px;width:90%;max-width:400px;max-height:70vh;display:flex;flex-direction:column;overflow:hidden}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--border);font-weight:700;color:var(--accent)}.modal-close{background:none;border:none;color:var(--text-secondary);font-size:22px;cursor:pointer;padding:0 4px}.modal-body{padding:12px 16px;overflow-y:auto;flex:1}.modal-list{display:flex;flex-direction:column;gap:8px}.modal-item{padding:8px 12px;border-radius:6px;font-size:13px;background:var(--bg-card);border:1px solid var(--border)}.modal-item.done{border-color:var(--success);color:var(--success)}.modal-list ul{margin:4px 0 0;padding-left:18px;font-size:13px;line-height:1.6;color:var(--text-secondary)}.modal-list li{margin-bottom:2px}.small-btn{background:var(--bg-card);border:1px solid var(--border);color:var(--text-primary);border-radius:4px;cursor:pointer;font-size:12px;padding:2px 6px}.small-btn.danger{color:var(--danger);border-color:var(--danger)}.equip-bag-item{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin-bottom:6px;padding:6px 8px;border-radius:6px}.modal-btn{width:100%}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}::-webkit-scrollbar-thumb:hover{background:var(--accent)}#main-dashboard{padding:6px 10px;background:var(--bg-card);border-radius:6px;border:1px solid var(--border);margin-bottom:4px}.dashboard-row{display:flex;justify-content:space-between;font-size:12px;color:var(--text-secondary);gap:8px}.inv-preview{color:var(--text-muted);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.enhance-btns{display:flex;flex-direction:column;gap:4px}.enhance-btn{border-color:#c08040;color:#c08040}#tutorial-overlay{display:none;position:sticky;top:4px;z-index:50;padding:12px;background:linear-gradient(135deg,#1a1a30,#2a2010);border:1px solid var(--accent);border-radius:8px;margin-bottom:8px}.tutorial-box p{color:var(--accent-glow);font-size:13px;margin-bottom:8px;line-height:1.6}.tutorial-box .action-btn{margin-right:6px;margin-top:4px}