*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{--app-vh:1vh}
body{font-family:'Microsoft YaHei',PingFang SC,sans-serif;background:radial-gradient(120% 120% at 50% 0%,#1a1d29 0%,#12141c 55%,#0d0f15 100%);color:#d5d9e3;font-size:14px;overflow:hidden;height:100vh;height:calc(var(--app-vh,1vh)*100)}
body.app-booting #app{visibility:hidden}
#app{width:100vw;height:100vh;height:calc(var(--app-vh,1vh)*100);display:flex;flex-direction:column;background:linear-gradient(180deg,rgba(255,255,255,0.015),rgba(255,255,255,0))}
.screen{display:none;width:100%;height:100%;flex-direction:column}
.screen.active{display:flex}

.login-bg{position:fixed;inset:0;background:linear-gradient(135deg,#16213e 0%,#0f3460 50%,#1a1a2e 100%);z-index:0}
.login-box{position:relative;z-index:1;margin:auto;width:320px;padding:30px 24px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:12px;backdrop-filter:blur(10px)}
.login-title{text-align:center;font-size:28px;font-weight:bold;letter-spacing:8px;color:#ffd700;margin-bottom:6px;text-shadow:0 0 20px rgba(255,215,0,0.3)}
.login-subtitle{text-align:center;font-size:12px;color:#888;letter-spacing:4px;margin-bottom:20px}
.login-tabs{display:flex;background:rgba(0,0,0,0.3);border-radius:6px;padding:3px;margin-bottom:16px}
.l-tab{flex:1;padding:8px;border:none;background:transparent;color:#888;cursor:pointer;font-size:13px;border-radius:4px;font-family:inherit;transition:.2s}
.l-tab.active{background:#ffd700;color:#000;font-weight:600}
.l-form{display:none;flex-direction:column;gap:10px}
.l-form.active{display:flex}
.l-input{padding:10px 12px;background:rgba(0,0,0,0.4);border:1px solid rgba(255,255,255,0.15);border-radius:6px;color:#fff;font-size:14px;font-family:inherit}
.l-input:focus{outline:none;border-color:#ffd700}
.l-select{color:#ccc}
.l-btn{padding:11px;background:linear-gradient(135deg,#ffd700,#ffaa00);border:none;border-radius:6px;color:#000;font-weight:600;font-size:14px;cursor:pointer;font-family:inherit;transition:.2s}
.l-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(255,215,0,0.3)}

#game-screen{background:linear-gradient(180deg,#121622 0%,#0f1219 100%);height:100vh;height:calc(var(--app-vh,1vh)*100)}

.top-info{padding:6px 12px;background:linear-gradient(180deg,#171b27 0%,#131722 100%);border-bottom:1px solid #2b3242;display:flex;justify-content:space-between;align-items:center;box-shadow:inset 0 -1px 0 rgba(255,255,255,0.03)}
.loc-line{display:flex;align-items:center;gap:8px}
.loc-text{font-weight:600;font-size:14px;color:#ffd700}
.loc-coord{font-size:11px;color:#888}
.time-line{display:flex;align-items:center;gap:8px;font-size:11px;color:#888}
#day-night-icon{font-size:14px;cursor:default;filter:drop-shadow(0 0 3px rgba(255,215,0,0.3));transition:transform .2s}
#weather-icon{font-size:14px;cursor:default;filter:drop-shadow(0 0 3px rgba(135,206,235,0.3));transition:transform .2s}
.mini-btn{padding:3px 8px;background:#2a2a45;border:1px solid #3a3a55;border-radius:4px;color:#aaa;cursor:pointer;font-size:11px;font-family:inherit}
.mini-btn:hover{border-color:#ffd700;color:#ffd700}

.status-row{display:flex;align-items:center;gap:12px;padding:6px 12px;background:#131822;border-bottom:1px solid #252c3a;flex-wrap:wrap;font-size:12px;color:#b6bdc9}
.stat-item{white-space:nowrap}
.stat-item b{color:#888;font-weight:normal;margin-right:2px}
.stat-item.hp{color:#ff4444}
.stat-item.hunger{color:#ff9944}
.stat-item.water{color:#44aaff}
.stat-item.weight{color:#aa88cc}

.main-area{flex:1;display:flex;gap:8px;padding:8px;overflow:hidden;min-height:0}

.left-controls{width:160px;display:flex;flex-direction:column;gap:6px;flex-shrink:0}
.left-col{width:240px;display:flex;flex-direction:column;gap:6px;flex-shrink:0;transition:width .3s ease,opacity .3s ease,margin .3s ease,padding .3s ease;overflow:hidden}
.left-col.collapsed{width:0!important;opacity:0;margin:0;padding:0;pointer-events:none;min-width:0}
.drawer-toggle{width:100%;padding:6px 0;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.15);border-radius:8px;color:#ffd700;font-size:14px;cursor:pointer;transition:all .2s}
.drawer-toggle:hover{background:rgba(255,215,0,0.15);border-color:rgba(255,215,0,0.4)}
.mobile-dpad{display:none}
.map-panel{background:linear-gradient(180deg,#151a25 0%,#111520 100%);border:1px solid #2a3240;border-radius:10px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 8px 24px rgba(0,0,0,0.28)}
.map-header{padding:6px 10px;border-bottom:1px solid #2d2d45;background:#151526;display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#ffd700;font-weight:600}
.map-controls{display:flex;align-items:center;gap:8px}
.map-zoom{display:flex;align-items:center;gap:4px}
.map-zoom button{width:20px;height:20px;background:#0d0d18;border:1px solid #2a2a42;border-radius:3px;color:#ffd700;cursor:pointer;font-size:14px;line-height:1;font-weight:bold}
.map-zoom button:hover{background:#1a1a2d;border-color:#ffd700}
.map-zoom span{font-size:11px;color:#888;min-width:30px;text-align:center}
#map-fullscreen{width:24px;height:24px;background:#0d0d18;border:1px solid #2a2a42;border-radius:3px;color:#ffd700;cursor:pointer;font-size:14px;line-height:1}
#map-fullscreen:hover{background:#1a1a2d;border-color:#ffd700}
.map-legend{padding:4px 10px;background:#0d0d18;border-bottom:1px solid #2d2d45;display:flex;justify-content:space-around;font-size:10px;color:#888}
.legend-item{display:flex;align-items:center;gap:3px}
.legend-color{width:10px;height:10px;border-radius:2px;border:1px solid}
.legend-color.current{background:#ff4444;border-color:#ff4444}
.legend-color.explored{background:#4CAF50;border-color:#4CAF50}
.legend-color.unexplored{background:#1a1a2d;border-color:#2a2a42}
.world-map-container{flex:1;overflow:auto;padding:4px;min-height:150px;max-height:200px}
.world-map-grid{display:grid;gap:1px;background:#0d0d18}
.world-map-cell{width:18px;height:18px;background:#1a1a2d;border:1px solid #2a2a42;display:flex;align-items:center;justify-content:center;font-size:9px;cursor:pointer;transition:.1s;position:relative}
.world-map-cell:hover{border-color:#ffd700;z-index:10;transform:scale(1.1)}
.world-map-cell.explored{background:#1a2a1a;border-color:#2a4a2a}
.world-map-cell.current{background:#3a1a1a;border-color:#ff4444;box-shadow:0 0 5px rgba(255,68,68,0.5)}
.world-map-cell.selected{border-color:#ffd700;box-shadow:0 0 8px rgba(255,215,0,0.5)}
.world-map-cell.dungeon-entrance{border-color:#a855f7;box-shadow:inset 0 0 0 1px rgba(216,180,254,0.55),0 0 6px rgba(168,85,247,0.35)}
.world-map-cell.dungeon-cooldown{border-color:#6b7280;box-shadow:inset 0 0 0 1px rgba(156,163,175,0.3),0 0 4px rgba(107,114,128,0.2)}
.map-info{padding:4px 10px;background:#151526;border-top:1px solid #2d2d45;display:flex;justify-content:space-between;font-size:10px;color:#888}
.map-info span{display:flex;align-items:center;gap:2px}
.map-info span:last-child{color:#4CAF50;font-weight:600}
.map-title{padding:6px 10px;font-size:11px;color:#888;border-bottom:1px solid #2d2d45;background:#151526}
.map-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;padding:6px}
.map-cell{aspect-ratio:1;background:#0d0d18;border:1px solid #2a2a42;border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:16px}
.map-cell.current{box-shadow:0 0 0 1.5px #ffd700;background:rgba(255,215,0,0.08)}
.dir-pad{padding:6px 8px 8px;border-top:1px solid #2d2d45}
.dir-row{display:flex;gap:2px;justify-content:center;margin-bottom:2px}
.dir-cell{flex:1;padding:5px 2px;text-align:center;font-size:11px;background:#0d0d18;border:1px solid #2a2a42;border-radius:3px;color:#777;cursor:default}
.dir-up,.dir-down,.dir-left,.dir-right{color:#ffd700;cursor:pointer;font-weight:600;transition:.15s}
.dir-up:hover,.dir-down:hover,.dir-left:hover,.dir-right:hover{background:rgba(255,215,0,0.1);border-color:#ffd700}
.fullscreen-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,0.95);z-index:9999;display:flex;align-items:center;justify-content:center;animation:fadeIn .2s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.fullscreen-map-container{width:95vw;height:95vh;max-width:1400px;background:#1a1a2d;border:2px solid #ffd700;border-radius:10px;display:flex;flex-direction:column;box-shadow:0 0 30px rgba(255,215,0,0.3)}
.fullscreen-map-header{padding:10px 15px;border-bottom:1px solid #2d2d45;background:#151526;display:flex;justify-content:space-between;align-items:center;font-size:14px;color:#ffd700;font-weight:600;border-radius:8px 8px 0 0}
.fullscreen-controls{display:flex;align-items:center;gap:10px}
#fullscreen-close{width:30px;height:30px;background:#0d0d18;border:1px solid #2a2a42;border-radius:3px;color:#ff4444;cursor:pointer;font-size:16px;line-height:1;font-weight:bold}
#fullscreen-close:hover{background:#1a1a2d;border-color:#ff4444}
.fullscreen-map-legend{padding:6px 15px;background:#0d0d18;border-bottom:1px solid #2d2d45;display:flex;justify-content:space-around;font-size:11px;color:#888}
.fullscreen-map-content{flex:1;overflow:auto;padding:10px;min-height:400px}
.fullscreen-map-grid{display:grid;gap:2px;background:#0d0d18;justify-content:center}
.fullscreen-map-cell{width:22px;height:22px;background:#1a1a2d;border:1px solid #2a2a42;display:flex;align-items:center;justify-content:center;font-size:11px;cursor:pointer;transition:.15s;position:relative}
.fullscreen-map-cell:hover{border-color:#ffd700;z-index:10;transform:scale(1.2);box-shadow:0 0 10px rgba(255,215,0,0.5)}
.fullscreen-map-cell.explored{background:#1a2a1a;border-color:#2a4a2a}
.fullscreen-map-cell.current{background:#3a1a1a;border-color:#ff4444;box-shadow:0 0 8px rgba(255,68,68,0.6)}
.fullscreen-map-cell.selected{border-color:#ffd700;box-shadow:0 0 10px rgba(255,215,0,0.6)}
.fullscreen-map-cell.dungeon-entrance{border-color:#a855f7;box-shadow:inset 0 0 0 1px rgba(216,180,254,0.6),0 0 8px rgba(168,85,247,0.4)}
.fullscreen-map-cell.dungeon-cooldown{border-color:#6b7280;box-shadow:inset 0 0 0 1px rgba(156,163,175,0.3),0 0 4px rgba(107,114,128,0.25)}
.fullscreen-map-info{padding:8px 15px;background:#151526;border-top:1px solid #2d2d45;display:flex;justify-content:space-around;font-size:11px;color:#888}
.fullscreen-map-info span{display:flex;align-items:center;gap:4px}
.fullscreen-map-footer{padding:8px;border-top:1px solid #2d2d45;background:#151526;border-radius:0 0 8px 8px}
.transport-method-selector{padding:8px 15px;display:flex;align-items:center;gap:10px;border-bottom:1px solid #2d2d45}
.transport-method-selector label{color:#ffd700;font-size:12px;font-weight:600}
.transport-method-selector select{flex:1;max-width:200px;padding:6px 10px;background:#0d0d18;border:1px solid #2a2a42;border-radius:4px;color:#ffd700;font-size:11px;cursor:pointer}
.transport-method-selector select:hover{border-color:#ffd700}
.transport-method-selector select option{background:#1a1a2d;color:#ffd700}
.dir-center{color:#ffd700;font-size:14px}

.func-bar{display:flex;gap:4px}
.f-btn{flex:1;padding:7px 4px;background:#1a1a2d;border:1px solid #2d2d45;border-radius:5px;color:#999;cursor:pointer;font-size:11px;font-family:inherit;transition:.15s}
.f-btn.active,.f-btn:hover{background:#252540;border-color:#ffd700;color:#ffd700}

.right-col{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
.msg-box{flex:1;background:linear-gradient(180deg,#111622 0%,#0d121d 100%);border:1px solid #2a3240;border-radius:10px;display:flex;flex-direction:column;min-height:0;overflow:hidden;box-shadow:0 10px 28px rgba(0,0,0,0.25)}
.msg-header{display:flex;align-items:center;gap:8px;padding:6px 10px;background:#141424;border-bottom:1px solid #2d2d45;font-size:12px}
.msg-header span:first-child{font-size:16px}
.msg-header span:nth-child(2){color:#ccc;font-weight:600}
.danger-tag{margin-left:auto;padding:1px 6px;background:rgba(255,68,68,0.15);border:1px solid rgba(255,68,68,0.3);border-radius:8px;font-size:10px;color:#ff4444;font-weight:600}
.close-msg{margin-left:auto;width:20px;height:20px;background:transparent;border:none;color:#666;cursor:pointer;font-size:16px;line-height:1}
.close-msg:hover{color:#ff4444}
.msg-content{flex:1;padding:8px 10px;overflow-y:auto;font-size:12px;line-height:1.7;color:#bbb;max-height:280px;min-height:120px}
.msg-content p{margin-bottom:4px;padding-left:8px;border-left:2px solid #333;animation:fadeIn .2s ease}
@keyframes fadeIn{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:translateX(0)}}

.res-box{background:linear-gradient(180deg,#151a25 0%,#111520 100%);border:1px solid #2a3240;border-radius:10px;padding:8px 12px;box-shadow:0 8px 20px rgba(0,0,0,0.2)}
.res-header{display:flex;gap:14px;margin-bottom:6px;font-size:11px;color:#888}
.res-header label{display:flex;align-items:center;gap:4px;cursor:pointer}
.res-header input[type=checkbox]{accent-color:#ffd700}
.res-list{display:flex;flex-wrap:wrap;gap:5px}
.res-list.hidden{display:none}
.res-tag{padding:4px 9px;background:#0d0d18;border:1px solid #333;border-radius:4px;font-size:11px;color:#aaa;cursor:pointer;transition:.15s}
.res-tag:hover{border-color:#666;color:#ddd}
.res-special{color:#ff6666;border-color:rgba(255,102,102,0.3)}
.monster-tag{color:#cc66ff;border-color:rgba(204,102,255,0.3)}

.bot-nav{display:flex;gap:8px;padding:10px 14px 14px;background:linear-gradient(180deg,#121724 0%,#0e121b 100%);border-top:1px solid #252d3b;-webkit-tap-highlight-color:transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,0.03)}
.bot-nav.enhanced{gap:8px;padding:10px 16px 14px}
.nav-b{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 6px;background:linear-gradient(180deg,#181e2a 0%,#141a25 100%);border:1px solid #2b3443;border-radius:14px;color:#97a0ad;cursor:pointer;font-family:inherit;transition:all .22s ease;position:relative;overflow:hidden;-webkit-tap-highlight-color:transparent;box-shadow:0 6px 16px rgba(0,0,0,0.22)}
.nav-b::before{content:'';position:absolute;top:50%;left:50%;width:0;height:0;background:rgba(255,215,0,0.15);border-radius:50%;transform:translate(-50%,-50%);transition:width .3s,height .3s}
.nav-b:active::before{width:120%;height:120%}
.nav-b .nav-icon{font-size:22px;display:block;line-height:1;margin-bottom:2px}
.nav-b .nav-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px}
.nav-b.active,.nav-b:hover{background:#252540;border-color:#ffd700;color:#ffd700;transform:translateY(-2px);box-shadow:0 4px 12px rgba(255,215,0,0.2)}
.nav-b.primary{background:linear-gradient(135deg,rgba(255,215,0,0.22),rgba(255,170,0,0.12));border-color:rgba(255,215,0,0.5);color:#ffd700}
.nav-b.primary:hover,.nav-b.primary.active{background:linear-gradient(135deg,rgba(255,215,0,0.35),rgba(255,170,0,0.22));border-color:#ffd700;color:#ffd700;box-shadow:0 4px 14px rgba(255,215,0,0.25)}
.nav-b.highlight{background:linear-gradient(135deg,rgba(255,215,0,0.3),rgba(245,158,11,0.18));border-color:rgba(255,215,0,0.55);color:#ffd700}
.nav-b.highlight:hover,.nav-b.highlight.active{background:linear-gradient(135deg,rgba(255,215,0,0.45),rgba(245,158,11,0.3));border-color:#ffd700;color:#ffd700;box-shadow:0 4px 14px rgba(255,215,0,0.3)}
.nav-b:active{transform:scale(0.95)!important}

.modal{display:none;position:fixed;inset:0;z-index:999;align-items:center;justify-content:center}
.modal.active{display:flex}
.modal-overlay{position:absolute;inset:0;background:rgba(0,0,0,0.75);backdrop-filter:blur(4px)}
.modal-box{position:relative;z-index:1;width:90%;max-width:380px;max-height:70vh;background:#1a1a2d;border:1px solid #3a3a55;border-radius:10px;display:flex;flex-direction:column;animation:slideUp .25s ease}
.modal-content{position:relative;z-index:1;width:90%;max-width:460px;max-height:70vh;background:#1a1a2d;border:1px solid #3a3a55;border-radius:10px;display:flex;flex-direction:column;margin:auto;animation:slideUp .25s ease}
@keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.m-head{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:#222240;border-bottom:1px solid #3a3a55;border-radius:10px 10px 0 0;font-size:14px;font-weight:600}
.m-close{width:26px;height:26px;background:#0d0d18;border:1px solid #444;border-radius:5px;color:#888;cursor:pointer;font-size:16px}
.m-close:hover{background:#ff4444;border-color:#ff4444;color:#fff}
.m-body{padding:14px 16px;overflow-y:auto}
.m-stat{margin-bottom:12px;padding:8px 10px;background:#0d0d18;border-radius:5px;font-size:12px;color:#aaa}
.m-stat b{color:#ffd700}
.m-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.bag-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 8px;background:#0d0d18;border:1px solid #2a2a42;border-radius:6px;cursor:pointer;transition:.15s}
.bag-item:hover{border-color:#ffd700;transform:translateY(-2px)}
.bag-item .icon{font-size:22px}
.bag-item .name{font-size:10px;color:#ccc;text-align:center}
.bag-item .count{font-size:9px;color:#666}

.skill-tabs{display:flex;gap:8px;margin-bottom:12px}
.skill-tab{flex:1;padding:8px;background:#0d0d18;border:1px solid #2a2a42;border-radius:5px;color:#888;cursor:pointer;font-size:12px;font-family:inherit;transition:.15s}
.skill-tab.active{background:#1a1a2d;border-color:#ffd700;color:#ffd700}
.skill-list{display:none}
.skill-list.active{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.skill-item{padding:12px;background:#0d0d18;border:1px solid #2a2a42;border-radius:6px;cursor:pointer;transition:.15s}
.skill-item:hover{border-color:#ffd700;transform:translateY(-2px)}
.skill-item .name{font-size:13px;color:#ffd700;font-weight:600;margin-bottom:4px}
.skill-item .type{font-size:10px;color:#888;margin-bottom:6px}
.skill-item .desc{font-size:11px;color:#aaa;line-height:1.4}
.skill-item .cost{font-size:10px;color:#ff9944;margin-top:6px}
.skill-item .rarity{display:inline-block;padding:2px 6px;border-radius:3px;font-size:9px;margin-top:4px}
.skill-item .rarity-1{background:#333;color:#aaa}
.skill-item .rarity-2{background:#2a4a2a;color:#88ff88}
.skill-item .rarity-3{background:#2a2a4a;color:#8888ff}
.skill-item .rarity-4{background:#4a2a4a;color:#ff88ff}
.skill-item .rarity-5{background:#4a3a1a;color:#ffd700}

::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:transparent}

.codex-modal{max-width:720px;max-height:90vh;display:flex;flex-direction:column}
.codex-modal .m-body{flex:1;overflow:hidden;display:flex;flex-direction:column}
.codex-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:12px;flex-shrink:0}
.codex-tab{padding:8px 4px;background:#0d0d18;border:1px solid #2a2a42;border-radius:4px;color:#888;cursor:pointer;font-size:12px;font-family:inherit;transition:.15s;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.codex-tab:hover{background:#1a1a2d;border-color:#3a3a55;color:#aaa}
.codex-tab.active{background:#22c55e;border-color:#22c55e;color:#fff;font-weight:600}
.codex-list{display:none;flex:1;overflow:hidden;min-height:0}
.codex-list.active{display:flex;gap:12px;min-height:0}
.codex-list-left{flex:0.35;min-width:100px;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;-ms-overflow-style:none}
.codex-list-left::-webkit-scrollbar{display:none}
.codex-list-right{flex:2.2;min-width:240px;overflow-y:auto;min-height:0;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:8px;padding:8px}
.codex-list-right::-webkit-scrollbar{width:5px}
.codex-list-right::-webkit-scrollbar-track{background:transparent}
.codex-list-right::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.2);border-radius:3px}
.codex-item{padding:8px 10px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);border-radius:4px;margin-bottom:4px;transition:.15s;cursor:pointer;display:flex;align-items:center;gap:8px;text-align:left}
.codex-item:hover{border-color:rgba(255,255,255,0.2);background:rgba(255,255,255,0.08)}
.codex-item.active{background:#22c55e;border-color:#22c55e}
.codex-item.active .name{color:#fff}
.codex-item.active .type{color:rgba(255,255,255,0.85)}
.codex-item.active .codex-item-icon{background:rgba(255,255,255,0.2);color:#fff}
.codex-item.active .codex-item-badge{background:rgba(255,255,255,0.25)!important;color:#fff!important;border-color:rgba(255,255,255,0.4)!important}
.codex-item .name{font-size:13px;color:#e2e8f0;font-weight:600;margin-bottom:3px}
.codex-item .type{font-size:10px;color:#94a3b8}
.codex-item .desc{font-size:11px;color:#aaa;line-height:1.4;margin-bottom:6px}
.codex-item .stats{font-size:10px;color:#888}
.codex-item .learned{color:#88ff88}
.codex-item .can-learn{color:#ffaa00}
.codex-item .cannot-learn{color:#ff4444}
.codex-item .rarity{display:inline-block;padding:2px 6px;border-radius:3px;font-size:9px;margin-top:4px}

/* 图鉴搜索与筛选 */
.codex-controls{padding:0 0 8px;display:flex;flex-direction:column;gap:8px}
.codex-search-row{display:flex;gap:6px;align-items:center}
.codex-search-input{flex:1;padding:7px 10px;background:#0d0d18;border:1px solid #2a2a42;border-radius:6px;color:#e2e8f0;font-size:12px;font-family:inherit;outline:none;transition:.15s}
.codex-search-input:focus{border-color:#ffd700}
.codex-search-clear{padding:7px 10px;background:#0d0d18;border:1px solid #2a2a42;border-radius:6px;color:#888;cursor:pointer;font-size:11px;font-family:inherit;white-space:nowrap;transition:.15s}
.codex-search-clear:hover{border-color:#ef4444;color:#ef4444}
.codex-subfilters{display:flex;gap:6px;flex-wrap:wrap}
.codex-subfilter-tag{padding:4px 10px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);border-radius:12px;color:#94a3b8;font-size:11px;cursor:pointer;transition:.15s;user-select:none}
.codex-subfilter-tag:hover{border-color:rgba(255,215,0,0.4);color:#ffd700}
.codex-subfilter-tag.active{background:rgba(255,215,0,0.12);border-color:#ffd700;color:#ffd700;font-weight:600}

/* 图鉴列表项增强 */
.codex-item-icon{font-size:18px;flex-shrink:0;width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.05);border-radius:6px}
.codex-item-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.codex-item-name-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.codex-item-badge{padding:1px 6px;border-radius:10px;font-size:9px;font-weight:600;border:1px solid;white-space:nowrap}
.codex-item.dimmed{opacity:0.45}
.codex-item.dimmed:hover{opacity:0.7}

/* 图鉴详情卡片 */
.codex-detail-header{text-align:center;font-size:16px;font-weight:700;color:#fbbf24;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,0.08)}
.codex-detail-card{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:8px;padding:10px 12px;margin-bottom:10px}
.codex-detail-card-title{font-size:12px;color:#fbbf24;font-weight:700;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,0.06)}
.codex-detail-card-body{display:flex;flex-direction:column;gap:6px}
.codex-detail-field{display:flex;justify-content:space-between;align-items:flex-start;font-size:12px;gap:8px}
.codex-detail-label{color:#94a3b8;flex-shrink:0;margin-top:1px}
.codex-detail-value{color:#e2e8f0;font-weight:500;text-align:right;word-break:break-word;flex:1}

/* 西游图鉴紧凑卡片 */
.jw-card{padding:5px 8px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:5px;margin-bottom:4px}
.jw-card:last-child{margin-bottom:0}
.jw-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:2px}
.jw-name{font-size:12px;color:#e2e8f0;font-weight:600}
.jw-tag{padding:1px 5px;border-radius:3px;font-size:9px;font-weight:600;border:1px solid}
.jw-meta{font-size:10px;color:#94a3b8}
.jw-stats{font-size:10px;color:#94a3b8;margin-bottom:2px}
.jw-extra{font-size:10px;color:#cbd5e1;margin-bottom:2px}
.jw-desc{font-size:10px;color:#64748b;line-height:1.3}

/* 西游图鉴简洁列表行 */
.jw-simple-row{padding:6px 8px;border-bottom:1px solid rgba(255,255,255,0.06);font-size:11px;line-height:1.5}
.jw-simple-row:last-child{border-bottom:none}
.jw-simple-row:hover{background:rgba(255,255,255,0.03)}
.jw-s-name{color:#e2e8f0;font-weight:600;margin-right:6px}
.jw-s-tag{font-size:10px;margin-right:6px}
.jw-s-meta{color:#94a3b8;margin-right:6px}
.jw-s-stats{color:#64748b}

.sys-menu{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.sys-btn{padding:20px;background:#0d0d18;border:1px solid #2a2a42;border-radius:8px;color:#aaa;cursor:pointer;font-size:14px;font-family:inherit;transition:.15s;display:flex;flex-direction:column;align-items:center;gap:8px}
.sys-btn:hover{border-color:#ffd700;color:#ffd700;transform:translateY(-2px)}
.sys-btn span:first-child{font-size:24px}

.map-header{padding:6px 10px;border-bottom:1px solid #2d2d45;background:#151526}
.world-map-btn{width:100%;padding:6px;background:linear-gradient(135deg,#2a4a2a,#1a3a1a);border:1px solid #4a6a4a;border-radius:4px;color:#88ff88;cursor:pointer;font-size:12px;font-family:inherit;transition:.15s}
.world-map-btn:hover{background:linear-gradient(135deg,#3a5a3a,#2a4a2a);border-color:#88ff88}

.world-map-sidebar{width:220px;background:#1a1a2d;border-right:1px solid #2d2d45;padding:15px;overflow-y:auto}
.world-map-sidebar h3{color:#ffd700;font-size:14px;margin-bottom:10px;padding-bottom:5px;border-bottom:1px solid #2d2d45}
.world-map-sidebar .stats-panel{margin-bottom:20px}
.world-map-sidebar .stat-item{display:flex;justify-content:space-between;padding:6px 0;font-size:12px;color:#aaa;border-bottom:1px solid #1a1a2d}
.world-map-sidebar .stat-value{color:#ffd700;font-weight:600}

.transport-section{margin-bottom:20px}
.transport-method{padding:10px;background:#0d0d18;border:1px solid #2a2a42;border-radius:6px;margin-bottom:8px;cursor:pointer;transition:.15s}
.transport-method:hover{border-color:#ffd700}
.transport-method.selected{border-color:#ffd700;background:rgba(255,215,0,0.08)}
.transport-method .name{color:#ffd700;font-size:13px;font-weight:600;margin-bottom:4px}
.transport-method .info{color:#888;font-size:11px}

.chunk-info{background:#0d0d18;border:1px solid #2a2a42;border-radius:6px;padding:12px}
.chunk-info h3{color:#ffd700;font-size:13px;margin-bottom:8px}
.teleport-btn{width:100%;padding:10px;background:linear-gradient(135deg,#2a4a2a,#1a3a1a);border:1px solid #4a6a4a;border-radius:6px;color:#88ff88;cursor:pointer;font-size:13px;font-family:inherit;margin-top:10px;transition:.15s}
.teleport-btn:hover{background:linear-gradient(135deg,#3a5a3a,#2a4a2a);border-color:#88ff88}
.teleport-btn:disabled{background:#1a1a1a;border-color:#2a2a2a;color:#666;cursor:not-allowed}

.world-map-main{flex:1;display:flex;flex-direction:column;background:#0a0a0a}
.map-controls{display:flex;justify-content:space-between;align-items:center;padding:10px;background:#1a1a2d;border-bottom:1px solid #2d2d45}
.map-controls button{padding:4px 10px;background:#2a2a45;border:1px solid #3a3a55;border-radius:4px;color:#aaa;cursor:pointer;font-size:12px;font-family:inherit}
.map-controls button:hover{border-color:#ffd700;color:#ffd700}

.world-map-grid{flex:1;overflow:auto;padding:10px;display:grid;gap:1px;background:#0d0d18}
.world-map-cell{width:20px;height:20px;background:#1a1a2d;border:1px solid #2a2a42;display:flex;align-items:center;justify-content:center;font-size:10px;cursor:pointer;transition:.1s}
.world-map-cell:hover{border-color:#ffd700;z-index:10}
.world-map-cell.explored{background:#1a2a1a;border-color:#2a4a2a}
.world-map-cell.current{background:#3a1a1a;border-color:#ff4444;box-shadow:0 0 5px rgba(255,68,68,0.5)}
.world-map-cell.can-teleport{background:#1a1a3a;border-color:#4444ff}
.world-map-cell.selected{border-color:#ffd700;box-shadow:0 0 8px rgba(255,215,0,0.5)}
.world-map-cell.dungeon-entrance{border:2px solid #a855f7 !important;box-shadow:inset 0 0 0 1px rgba(245,208,254,0.9),0 0 10px rgba(168,85,247,0.55) !important}
.world-map-cell.dungeon-cooldown{border:2px dashed #6b7280 !important;box-shadow:inset 0 0 0 1px rgba(156,163,175,0.25),0 0 4px rgba(107,114,128,0.2) !important}
.fullscreen-map-cell.dungeon-entrance{border:2px solid #a855f7 !important;box-shadow:inset 0 0 0 1px rgba(245,208,254,0.9),0 0 12px rgba(168,85,247,0.65) !important}
.fullscreen-map-cell.dungeon-cooldown{border:2px dashed #6b7280 !important;box-shadow:inset 0 0 0 1px rgba(156,163,175,0.25),0 0 6px rgba(107,114,128,0.25) !important}

::-webkit-scrollbar-thumb{background:#3a3a55;border-radius:3px}

.recipe-list{display:flex;flex-direction:column;gap:10px;max-height:450px;overflow-y:auto;padding:5px;-webkit-overflow-scrolling:touch}
.recipe-item{background:#1a1a2d;border:1px solid #2d2d45;border-radius:8px;padding:12px;transition:.15s}
.recipe-item:hover{border-color:#fbbf24}

/* 增强版制作系统样式 */
.recipe-item.enhanced {
    background: linear-gradient(135deg, rgba(26,26,45,0.95), rgba(22,33,62,0.95));
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.recipe-header-enhanced {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
}

.recipe-title-section {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.recipe-icon {
    font-size: 28px;
    filter: drop-shadow(0 0 6px rgba(251,191,36,0.3));
}

.recipe-name-enhanced {
    font-size: 16px;
    font-weight: bold;
    color: #ffd700;
    display: block;
    text-shadow: 0 0 10px rgba(255,215,0,0.3);
}

.recipe-desc {
    font-size: 11px;
    color: #888;
    margin-top: 2px;
}

.recipe-meta {
    display: flex;
    align-items: center;
    gap: 6px;
}

.success-rate-badge {
    padding: 4px 10px;
    border-radius: 15px;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    white-space: nowrap;
}

.race-bonus {
    font-size: 11px;
    color: #7ec850;
    background: rgba(124,200,80,0.15);
    padding: 2px 6px;
    border-radius: 8px;
}

.recipe-result-enhanced {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: rgba(0,0,0,0.2);
    border-radius: 6px;
    margin-bottom: 8px;
}

.result-label {
    font-size: 12px;
    color: #888;
}

.result-item-name {
    font-size: 13px;
    color: #7ec850;
    font-weight: 600;
}

.result-count {
    font-size: 12px;
    color: #7ec850;
    background: rgba(124,200,80,0.15);
    padding: 2px 6px;
    border-radius: 8px;
}

.craft-time {
    margin-left: auto;
    font-size: 11px;
    color: #888;
}

.materials-container {
    margin-bottom: 8px;
}

.materials-label {
    font-size: 11px;
    color: #888;
    margin-bottom: 4px;
}

.materials-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.recipe-requirements {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding: 6px 0;
    border-top: 1px solid rgba(255,255,255,0.05);
}

.req-item {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 10px;
    background: rgba(255,255,255,0.05);
    color: #888;
}

.req-item.met {
    color: #7ec850;
    background: rgba(124,200,80,0.1);
}

.req-item.unmet {
    color: #ff6b6b;
    background: rgba(255,107,107,0.1);
}

.recipe-actions {
    display: flex;
    gap: 8px;
}

.craft-btn-enhanced {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.craft-btn-enhanced.primary {
    background: linear-gradient(135deg, #fbbf24, #f39c12);
    color: #000;
    box-shadow: 0 2px 8px rgba(251,191,36,0.3);
}

.craft-btn-enhanced.primary:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(251,191,36,0.4);
}

.craft-btn-enhanced.secondary {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    font-size: 11px;
    padding: 10px 12px;
}

.craft-btn-enhanced:hover:not(:disabled) {
    opacity: 0.9;
}

.craft-btn-enhanced.disabled,
.craft-btn-enhanced:disabled {
    background: #2a2a2a;
    color: #666;
    cursor: not-allowed;
    opacity: 0.5;
}

.crafting-animation {
    animation: craftingPulse 1s infinite;
}

@keyframes craftingPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 制作分类标签 */
.craft-categories {
    display: flex;
    gap: 6px;
    padding: 10px 12px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.craft-cat-tab {
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    color: #888;
    background: rgba(255,255,255,0.05);
    border: 1px solid transparent;
    border-radius: 15px;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s;
}

.craft-cat-tab.active {
    color: #fff;
    background: linear-gradient(135deg, #fbbf24, #f39c12);
    border-color: #fbbf24;
}

.craft-cat-tab:hover:not(.active) {
    background: rgba(255,255,255,0.1);
    color: #ccc;
}

.debuff-warning{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,0.9);border:2px solid #ff4444;border-radius:10px;padding:20px;z-index:10000;animation:pulse 1s infinite}
.debuff-warning .title{color:#ff4444;font-size:18px;font-weight:bold;margin-bottom:10px}
.debuff-warning .content{color:#fff;font-size:14px}
@keyframes pulse{0%,100%{box-shadow:0 0 10px rgba(255,68,68,0.5)}50%{box-shadow:0 0 20px rgba(255,68,68,0.8)}}

/* Mobile playability fixes */
@media (max-width: 900px) {
  body, #app, #game-screen { height: 100dvh; overflow: hidden; }
  .top-info { padding: 6px 8px; }
  .status-row { padding: 6px 8px; gap: 8px; font-size: 12px; }
  .main-area { flex-direction: column; padding: 6px; gap: 6px; overflow: hidden; }
  .left-col { width: 100%; display: grid; grid-template-columns: 1fr; gap: 6px; }
  .map-panel { width: 100%; }
  .world-map-container { min-height: 120px; max-height: 150px; }
  .right-col { flex: 1; min-height: 0; }
  .msg-content { max-height: none; min-height: 140px; font-size: 12px; }
  .res-box { padding: 6px 8px; }
  .bot-nav { position: sticky; bottom: 0; z-index: 60; padding: 8px; gap: 6px; }
  .nav-b { padding: 8px 4px; border-radius: 10px; }
  .nav-b .nav-icon { font-size: 18px; }
  .nav-b .nav-label { font-size: 10px; }
  .modal-box { width: 96%; max-height: 84dvh; }
  .m-grid { grid-template-columns: repeat(2, 1fr); }
  .skill-list.active { grid-template-columns: 1fr; }
  .sys-menu { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .login-box { width: 92%; padding: 20px 16px; }
  .login-title { font-size: 24px; letter-spacing: 4px; }
  .loc-text { font-size: 12px; }
  .loc-coord { font-size: 10px; }
  #day-night-icon, #weather-icon { font-size: 12px; }
  .time-line { gap: 4px; font-size: 10px; }
  .world-map-cell { width: 20px; height: 20px; font-size: 10px; }
  .fullscreen-map-cell { width: 20px; height: 20px; font-size: 10px; }
  /* 图鉴移动端优化 */
  .codex-modal { width: 98%; max-width: none; margin: 4px auto; }
  .codex-modal .m-body { padding: 10px; }
  .codex-list.active { gap: 8px; }
  .codex-list-left { flex: 0 0 110px; min-width: 110px; }
  .codex-list-right { flex: 1; min-width: 0; padding: 6px; }
  .codex-detail-header { font-size: 14px; margin-bottom: 10px; padding-bottom: 8px; }
  .codex-detail-card { padding: 8px; margin-bottom: 8px; }
  .codex-detail-card-title { font-size: 11px; margin-bottom: 6px; padding-bottom: 4px; }
  .codex-detail-field { font-size: 11px; gap: 6px; }
  .jw-name { font-size: 11px; }
  .jw-stats, .jw-extra, .jw-desc { font-size: 9px; }
  .jw-meta { font-size: 9px; }
}

/* === v3 合并 (来自 style_v3.css, 2026-04-21) === */

/**
 * 主界面 V3 - 完全优化版
 * 风格：与背包和战斗界面保持一致
 */

/* ==================== V3 整体容器 ==================== */
#app {
    background: #f3f6fb;
    color: #1f2937;
}

/* ==================== V3 顶部信息栏 ==================== */
.top-info {
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    padding: 12px 16px;
}

.loc-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.loc-text {
    font-size: 20px;
    font-weight: 800;
    color: #111827;
}

.loc-coord {
    font-size: 13px;
    color: #6b7280;
    font-weight: 600;
}

.time-line {
    display: flex;
    align-items: center;
    gap: 10px;
}

#game-time {
    font-size: 13px;
    color: #4b5563;
    font-weight: 600;
}

.mini-btn {
    padding: 6px 14px;
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    color: #374151;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.mini-btn:hover {
    background: #eff6ff;
    border-color: #93c5fd;
    color: #1d4ed8;
}

/* ==================== V3 状态栏 ==================== */
.status-row {
    background: rgba(0,0,0,0.25);
    padding: 10px 16px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.stat-item {
    padding: 6px 12px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    color: rgba(255,255,255,0.9);
}

.stat-item b {
    color: #ffd700;
    margin-right: 4px;
}

.stat-item.hp {
    border-color: rgba(34,197,94,0.4);
    background: rgba(34,197,94,0.1);
}

.stat-item.hp b {
    color: #4ade80;
}

.stat-item.spirit {
    border-color: rgba(59,130,246,0.4);
    background: rgba(59,130,246,0.1);
}

.stat-item.spirit b {
    color: #60a5fa;
}

.stat-item.hunger {
    border-color: rgba(249,115,22,0.4);
    background: rgba(249,115,22,0.1);
}

.stat-item.hunger b {
    color: #f97316;
}

.stat-item.water {
    border-color: rgba(14,165,233,0.4);
    background: rgba(14,165,233,0.1);
}

.stat-item.water b {
    color: #38bdf8;
}

.stat-item.exp {
    border-color: rgba(167,139,250,0.4);
    background: rgba(167,139,250,0.1);
    font-size: 12px;
}

.stat-item.exp b {
    color: #a78bfa;
}

/* HP 和灵力数值金色高亮 */
#hp-text,
#spirit-text {
    color: #ffd700;
    font-weight: 700;
}

/* 等级数字白色加粗 */
#player-level {
    color: #ffffff;
    font-weight: 800;
}

/* 饱食/水分低于30时红色警告 */
#hunger-text.low,
#water-text.low {
    color: #ff4444;
    animation: stat-pulse 1.2s ease-in-out infinite;
}

@keyframes stat-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

/* ==================== V3 主区域 ==================== */
.main-area {
    gap: 12px;
    padding: 12px 16px;
}

/* ==================== V3 左侧面板 ==================== */
.left-col {
    gap: 12px;
}

/* ==================== V3 地图面板 ==================== */
.map-panel {
    background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
    border: 2px solid rgba(255,255,255,0.12);
    border-radius: 16px;
    overflow: hidden;
}

.map-header {
    background: rgba(0,0,0,0.35);
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.map-header span {
    font-size: 16px;
    font-weight: 900;
    color: #ffd700;
}

.map-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

#map-fullscreen, #map-zoom-in, #map-zoom-out {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.8);
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s;
}

#map-fullscreen:hover, #map-zoom-in:hover, #map-zoom-out:hover {
    background: rgba(255,215,0,0.15);
    border-color: rgba(255,215,0,0.4);
    color: #ffd700;
}

.map-zoom {
    display: flex;
    align-items: center;
    gap: 6px;
}

#map-zoom-level {
    font-size: 13px;
    color: rgba(255,255,255,0.7);
    font-weight: 700;
}

.map-legend {
    padding: 8px 16px;
    background: rgba(0,0,0,0.2);
    display: flex;
    gap: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.legend-item {
    font-size: 11px;
    color: rgba(255,255,255,0.7);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}

.legend-color {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

.legend-color.current {
    background: #ef4444;
}

.legend-color.explored {
    background: #22c55e;
}

.legend-color.unexplored {
    background: #4b5563;
}

.world-map-container {
    background: rgba(0,0,0,0.3);
}

/* ==================== V3 位置信息面板 ==================== */
.location-panel {
    background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
    border: 2px solid rgba(255,255,255,0.12);
    border-radius: 16px;
    padding: 14px 16px;
}

.loc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.loc-name-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

#terrain-emoji {
    font-size: 28px;
}

#terrain-name {
    font-size: 18px;
    font-weight: 900;
    color: #ffd700;
}

#danger-level {
    padding: 4px 12px;
    background: rgba(239,68,68,0.15);
    border: 1px solid rgba(239,68,68,0.4);
    border-radius: 10px;
    font-size: 13px;
    font-weight: 800;
    color: #fca5a5;
}

#loc-detail {
    font-size: 13px;
    color: rgba(255,255,255,0.7);
    margin-bottom: 12px;
}

.res-title, .mon-title {
    font-size: 13px;
    font-weight: 800;
    color: rgba(255,255,255,0.85);
    margin-bottom: 8px;
    margin-top: 10px;
}

.res-list, .mon-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.res-tag, .monster-tag {
    padding: 6px 12px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    color: rgba(255,255,255,0.85);
    cursor: pointer;
    transition: all 0.2s;
}

.res-tag:hover, .monster-tag:hover {
    background: rgba(255,215,0,0.15);
    border-color: rgba(255,215,0,0.4);
    color: #ffd700;
    transform: translateY(-1px);
}

/* ==================== V3 移动控制器 ==================== */
.move-controls {
    background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
    border: 2px solid rgba(255,255,255,0.12);
    border-radius: 16px;
    padding: 14px;
}

.move-title {
    font-size: 14px;
    font-weight: 900;
    color: rgba(255,255,255,0.85);
    margin-bottom: 10px;
}

.move-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.move-btn {
    padding: 12px;
    background: rgba(255,255,255,0.06);
    border: 2px solid rgba(255,255,255,0.15);
    border-radius: 12px;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.15s;
}

.move-btn:hover {
    background: rgba(255,215,0,0.15);
    border-color: rgba(255,215,0,0.4);
    transform: translateY(-1px);
}

.move-btn:active {
    transform: scale(0.95);
}

.move-info {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: rgba(255,255,255,0.6);
}

/* ==================== V3 右侧面板 ==================== */
.right-col {
    gap: 12px;
}

/* ==================== V3 右侧快捷栏 ==================== */
.quick-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.quick-btn {
    flex: 1;
    min-width: 120px;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.03) 100%);
    border: 2px solid rgba(255,255,255,0.15);
    border-radius: 14px;
    font-size: 15px;
    font-weight: 800;
    color: rgba(255,255,255,0.9);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.quick-btn .icon {
    font-size: 26px;
}

.quick-btn:hover {
    background: linear-gradient(135deg, rgba(255,215,0,0.15) 0%, rgba(255,215,0,0.05) 100%);
    border-color: rgba(255,215,0,0.4);
    color: #ffd700;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(255,215,0,0.15);
}

/* ==================== V3 消息日志 ==================== */
.message-panel, .msg-box {
    background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
    border: 2px solid rgba(255,255,255,0.12);
    border-radius: 16px;
    overflow: hidden;
}

.msg-header {
    background: rgba(0,0,0,0.35);
    padding: 10px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.msg-title {
    font-size: 15px;
    font-weight: 900;
    color: #ffd700;
}

#message-log {
    padding: 12px 16px;
}

#message-log p {
    padding: 6px 0;
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255,255,255,0.8);
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

#message-log p:last-child {
    border-bottom: none;
}

/* ==================== V3 底部导航 ==================== */
.bottom-nav, .bot-nav {
    background: linear-gradient(0deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.25) 100%);
    padding: 12px 16px 20px;
    border-top: 2px solid rgba(255,215,0,0.25);
    display: flex;
    gap: 10px;
}

.nav-b {
    flex: 1;
    padding: 14px 12px;
    background: rgba(255,255,255,0.06);
    border: 2px solid rgba(255,255,255,0.15);
    border-radius: 18px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.nav-b:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.25);
    transform: translateY(-2px);
}

.nav-b.primary {
    background: linear-gradient(135deg, rgba(255,215,0,0.25) 0%, rgba(255,170,0,0.12) 100%);
    border-color: rgba(255,215,0,0.55);
    box-shadow: 0 0 20px rgba(255,215,0,0.2);
}

.nav-b.primary:hover {
    background: linear-gradient(135deg, rgba(255,215,0,0.4) 0%, rgba(255,170,0,0.25) 100%);
    box-shadow: 0 0 28px rgba(255,215,0,0.35);
}

.nav-b .nav-icon {
    font-size: 26px;
}

.nav-b .nav-label {
    font-size: 13px;
    font-weight: 800;
    color: rgba(255,255,255,0.9);
}

.nav-b.primary .nav-label {
    color: #ffd700;
}

/* ==================== V3 旧结构兼容补丁 ==================== */
.map-info {
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 700;
    color: rgba(255,255,255,0.75);
    background: rgba(0,0,0,0.22);
    border-top: 1px solid rgba(255,255,255,0.06);
    display: flex;
    justify-content: space-between;
}

.dir-pad {
    padding: 12px;
    background: rgba(0,0,0,0.2);
    border-top: 1px solid rgba(255,255,255,0.06);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dir-row {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.dir-cell {
    width: 44px !important;
    height: 44px !important;
    border-radius: 10px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.85) !important;
    font-size: 18px !important;
    font-weight: 800;
    user-select: none;
}

.dir-cell[data-dir="up"],
.dir-cell[data-dir="down"],
.dir-cell[data-dir="left"],
.dir-cell[data-dir="right"] {
    cursor: pointer;
    transition: all 0.2s;
}

.dir-cell[data-dir="up"]:hover,
.dir-cell[data-dir="down"]:hover,
.dir-cell[data-dir="left"]:hover,
.dir-cell[data-dir="right"]:hover {
    background: rgba(255,215,0,0.16);
    border-color: rgba(255,215,0,0.45);
    color: #ffd700;
    transform: translateY(-1px);
}

.func-bar {
    display: flex;
    gap: 8px;
}

.f-btn {
    flex: 1;
    padding: 10px 8px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.86);
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.2s;
}

.f-btn:hover,
.f-btn.active {
    background: rgba(255,215,0,0.16);
    border-color: rgba(255,215,0,0.45);
    color: #ffd700;
}

.danger-tag {
    margin-left: auto;
    padding: 3px 10px;
    border-radius: 10px;
    background: rgba(239,68,68,0.15);
    border: 1px solid rgba(239,68,68,0.4);
    color: #fca5a5;
    font-size: 12px;
    font-weight: 800;
}

.close-msg {
    width: 24px;
    height: 24px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.16);
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.85);
    cursor: pointer;
    line-height: 1;
}

.close-msg:hover {
    background: rgba(255,255,255,0.15);
}

.msg-content {
    max-height: 260px;
    overflow-y: auto;
}

.res-box {
    background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
    border: 2px solid rgba(255,255,255,0.12);
    border-radius: 16px;
    overflow: hidden;
}

.res-header {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 10px 14px;
    background: rgba(0,0,0,0.28);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    font-size: 12px;
    font-weight: 700;
    color: rgba(255,255,255,0.86);
}

.res-header label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

.res-list {
    padding: 10px 12px;
    min-height: 72px;
}

.hidden {
    display: none !important;
}

/* ==================== V3 响应式设计 ==================== */
@media (max-width: 768px) {
    /* === 手机端：隐藏桌面左侧面板 === */
    .left-controls, .left-col {
        display: none !important;
    }

    /* === 手机端：主区域只留消息+资源 === */
    .main-area {
        flex-direction: column;
        padding: 3px 5px;
        gap: 3px;
        overflow: hidden;
        flex: 1;
        min-height: 0;
    }

    /* === 顶部信息栏手机美化 === */
    .top-info {
        padding: 6px 10px;
        background: linear-gradient(180deg, rgba(13,20,36,0.96) 0%, rgba(10,15,28,0.92) 100%) !important;
        border-bottom: 1px solid rgba(255,215,0,0.1) !important;
    }

    .loc-text {
        font-size: 15px !important;
        color: #fbbf24 !important;
        text-shadow: 0 0 8px rgba(251,191,36,0.2);
    }

    .loc-coord {
        font-size: 10px !important;
        color: #64748b !important;
    }

    .mini-btn {
        background: rgba(255,255,255,0.06) !important;
        border: 1px solid rgba(255,255,255,0.1) !important;
        border-radius: 6px !important;
        padding: 3px 8px !important;
        font-size: 10px !important;
    }

    .right-col {
        width: 100% !important;
        display: grid !important;
        grid-template-rows: auto minmax(80px, 1fr) auto;
        flex: 1;
        min-height: 0;
        overflow: hidden;
        gap: 4px;
    }

    /* === 状态栏紧凑美化 === */
    .status-row {
        gap: 4px;
        padding: 5px 8px;
        overflow-x: auto;
        flex-wrap: nowrap;
        background: linear-gradient(180deg, rgba(13,20,36,0.9) 0%, rgba(10,15,28,0.85) 100%);
        border-bottom: 1px solid rgba(100,140,200,0.12);
    }

    .stat-item {
        font-size: 11px;
        padding: 3px 7px;
        border-radius: 10px;
        white-space: nowrap;
        flex-shrink: 0;
        background: rgba(255,255,255,0.04);
        border: 1px solid rgba(255,255,255,0.06);
    }

    .stat-item.hp {
        color: #f87171;
        background: rgba(248,113,113,0.08);
        border-color: rgba(248,113,113,0.15);
    }
    .stat-item.lv {
        color: #fbbf24;
        background: rgba(251,191,36,0.08);
        border-color: rgba(251,191,36,0.15);
    }
    .stat-item.spirit {
        color: #60a5fa;
        background: rgba(96,165,250,0.08);
        border-color: rgba(96,165,250,0.15);
    }
    .stat-item.hunger {
        color: #fb923c;
        background: rgba(251,146,60,0.08);
        border-color: rgba(251,146,60,0.15);
    }
    .stat-item.water {
        color: #38bdf8;
        background: rgba(56,189,248,0.08);
        border-color: rgba(56,189,248,0.15);
    }

    .stat-item.exp, .stat-item.weight {
        display: none;
    }

    /* === 消息框 === */
    .msg-box {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
        border-radius: 10px;
        overflow: hidden;
        border: 1px solid rgba(100,140,200,0.12);
        box-shadow: 0 2px 12px rgba(0,0,0,0.25);
        order: 2;
    }

    .msg-content {
        flex: 1;
        min-height: 0 !important;
        max-height: none;
        overflow-y: hidden;
        font-size: 13px;
        line-height: 1.6;
    }

    .msg-content .msg-line {
        padding: 2px 0;
    }

    /* === 资源框紧凑美化 === */
    .res-box {
        border-radius: 10px;
        max-height: 140px;
        overflow: hidden;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        border: 1px solid rgba(100,140,200,0.12);
        box-shadow: 0 2px 12px rgba(0,0,0,0.25);
        order: 1;
    }

    .res-header {
        padding: 6px 10px;
        font-size: 11px;
        background: linear-gradient(135deg, rgba(251,191,36,0.06), rgba(255,215,0,0.03));
        border-bottom: 1px solid rgba(255,215,0,0.08);
    }

    .res-list {
        min-height: 0;
        padding: 6px 10px;
        overflow-y: hidden;
        font-size: 12px;
        flex: none;
    }

    #npc-list { order: -1; }

    .res-list .res-item {
        padding: 3px 6px;
        margin: 2px 0;
        border-radius: 6px;
        background: rgba(255,255,255,0.03);
        border: 1px solid rgba(255,255,255,0.04);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .monster-item {
        padding: 5px 8px !important;
        margin: 3px 0 !important;
        border-radius: 8px !important;
        background: rgba(255,255,255,0.03) !important;
        border: 1px solid rgba(255,255,255,0.06) !important;
    }

    .monster-item .m-name {
        color: #f87171 !important;
        font-weight: 600 !important;
    }

    .monster-item .m-info {
        color: #94a3b8 !important;
        font-size: 10px !important;
    }

    /* === 手机端方向键美化 === */
    .mobile-dpad {
        display: grid;
        grid-template-rows: auto auto auto;
        gap: 2px;
        padding: 4px 60px;
        background: linear-gradient(180deg, rgba(11,16,32,0.98) 0%, rgba(8,12,24,0.98) 100%);
        border-top: 1px solid rgba(255,215,0,0.12);
    }

    .dpad-row {
        display: flex;
        justify-content: center;
        gap: 2px;
    }

    .dpad-btn {
        width: 40px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.03) 100%);
        border: 1px solid rgba(255,215,0,0.12);
        border-radius: 6px;
        color: #ffd700;
        font-size: 16px;
        cursor: pointer;
        user-select: none;
        -webkit-user-select: none;
        transition: all .15s;
        text-shadow: 0 0 6px rgba(255,215,0,0.3);
        box-shadow: 0 1px 4px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.05);
    }

    .dpad-btn:active {
        background: linear-gradient(180deg, rgba(255,215,0,0.25) 0%, rgba(255,215,0,0.15) 100%);
        border-color: rgba(255,215,0,0.4);
        transform: scale(0.92);
        box-shadow: 0 0 10px rgba(255,215,0,0.2), inset 0 1px 0 rgba(255,215,0,0.1);
    }

    .dpad-btn.dpad-center {
        color: rgba(255,215,0,0.3);
        cursor: default;
        font-size: 10px;
        text-shadow: none;
        background: rgba(255,255,255,0.02);
        border-color: rgba(255,255,255,0.05);
        box-shadow: none;
    }

    /* === 底部导航美化 === */
    .bot-nav {
        padding: 4px 6px 14px !important;
        gap: 4px !important;
        background: linear-gradient(180deg, rgba(11,16,32,0.96) 0%, rgba(6,10,20,0.98) 100%) !important;
        border-top: 1px solid rgba(255,215,0,0.08) !important;
    }

    .nav-b {
        padding: 6px 4px !important;
        border-radius: 10px !important;
        background: rgba(255,255,255,0.03) !important;
        border: 1px solid rgba(255,255,255,0.04) !important;
        transition: all .2s !important;
    }

    .nav-b.active {
        background: rgba(255,215,0,0.08) !important;
        border-color: rgba(255,215,0,0.2) !important;
        box-shadow: 0 0 12px rgba(255,215,0,0.08) !important;
    }

    .nav-b .nav-icon { font-size: 18px !important; }
    .nav-b .nav-label { font-size: 10px !important; letter-spacing: 0.3px !important; }

    /* === 手机端地图已改为全屏地图，不再使用 mobile-show === */

    .world-map-container {
        min-height: 200px;
        max-height: 50vh;
    }

    /* === 手机端迷你地图（5x5缩略图） === */
    .mini-map {
        display: flex !important;
        flex-direction: column;
        background: rgba(0,0,0,0.4);
        border-radius: 8px;
        overflow: hidden;
        border: 1px solid rgba(255,215,0,0.1);
        margin-bottom: 3px;
        padding: 4px;
        gap: 2px;
        max-height: 110px;
        order: 0;
    }

    .mm-grid-5x5 { display: none; }
    .mm-info-row { display: none; }
    .mm-terrain { display: none; }
    .mm-hint { display: none; }

    /* === 手机端弹窗通用适配 === */
    .modal-box {
        width: 95vw !important;
        max-width: none !important;
        max-height: 88vh !important;
        border-radius: 14px !important;
    }

    .m-head {
        padding: 10px 14px !important;
        font-size: 15px !important;
    }

    .m-close {
        width: 40px !important;
        height: 40px !important;
        font-size: 22px !important;
        border-radius: 50% !important;
        background: rgba(255,255,255,0.08) !important;
        border: 1px solid rgba(255,255,255,0.15) !important;
        color: #f87171 !important;
        flex-shrink: 0 !important;
    }

    .m-body {
        padding: 10px 12px !important;
        max-height: 75vh !important;
        font-size: 13px !important;
    }

    .m-btn {
        min-height: 42px !important;
        font-size: 14px !important;
        padding: 10px 16px !important;
        border-radius: 10px !important;
    }

    /* 洞府弹窗 */
    #dongfu-modal .modal-box {
        max-width: none !important;
        width: 95vw !important;
    }

    #dongfu-modal .m-body {
        max-height: 75vh !important;
    }

    #dongfu-tech-list {
        grid-template-columns: 1fr !important;
    }

    .dongfu-tech-card {
        padding: 10px !important;
    }

    /* 技能弹窗tab */
    .skill-tabs, .codex-tabs, .cultivation-tabs {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        gap: 4px !important;
        padding-bottom: 4px !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .skill-tab, .codex-tab, .cultivation-tab {
        flex-shrink: 0 !important;
        padding: 7px 12px !important;
        font-size: 12px !important;
        border-radius: 8px !important;
        min-height: 36px !important;
    }

    /* 技能/图鉴列表项 */
    .skill-item, .codex-item {
        padding: 8px 10px !important;
        margin-bottom: 4px !important;
        border-radius: 8px !important;
        font-size: 12px !important;
    }

    /* 配方列表 */
    .recipe-item {
        padding: 10px !important;
        margin-bottom: 6px !important;
        border-radius: 10px !important;
    }

    .recipe-item button {
        min-height: 38px !important;
        font-size: 13px !important;
        border-radius: 8px !important;
    }

    /* 修炼弹窗 */
    .cultivate-actions {
        flex-direction: row !important;
        gap: 6px !important;
    }

    .cult-btn {
        min-height: 40px !important;
        font-size: 13px !important;
        flex: 1 !important;
    }

    .method-filter {
        flex-direction: row !important;
        gap: 6px !important;
        overflow-x: auto !important;
    }

    .method-filter select {
        min-height: 36px !important;
        font-size: 12px !important;
        flex-shrink: 0 !important;
    }

    /* 系统弹窗菜单 */
    .sys-menu {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
    }

    .sys-btn {
        min-height: 50px !important;
        font-size: 12px !important;
        padding: 8px 4px !important;
        border-radius: 10px !important;
    }

    /* 属性分配 */
    .attr-grid {
        gap: 6px !important;
    }

    .attr-points-info {
        font-size: 13px !important;
        padding: 8px !important;
    }

    /* 全屏地图overlay手机适配 */
    .fullscreen-map-container {
        width: 100vw !important;
        height: 100vh !important;
        max-width: none !important;
        border-radius: 0 !important;
        border: none !important;
    }

    .fullscreen-map-header {
        padding: 8px 12px !important;
        font-size: 14px !important;
        border-radius: 0 !important;
    }

    .fullscreen-map-cell {
        width: 18px !important;
        height: 18px !important;
        font-size: 9px !important;
    }

    #fullscreen-close {
        width: 40px !important;
        height: 40px !important;
        font-size: 20px !important;
        background: rgba(255,68,68,0.15) !important;
        border-color: rgba(255,68,68,0.4) !important;
        border-radius: 50% !important;
    }

    .fullscreen-map-legend {
        font-size: 10px !important;
        padding: 4px 10px !important;
    }
}

/* 小地图默认隐藏 */
.mini-map { display: none; }

/* ==================== V3 快速美化补丁（2026-04） ==================== */

#game-screen {
    background:
        radial-gradient(120% 100% at 20% 0%, rgba(56, 189, 248, 0.06) 0%, transparent 45%),
        radial-gradient(120% 100% at 100% 20%, rgba(99, 102, 241, 0.08) 0%, transparent 48%),
        linear-gradient(180deg, #0b1020 0%, #090e1b 100%);
}

.top-info {
    background: linear-gradient(180deg, rgba(13, 20, 38, 0.96) 0%, rgba(10, 15, 30, 0.96) 100%);
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
    padding: 10px 16px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.loc-text {
    font-size: 22px;
    color: #e2e8f0;
    letter-spacing: 0.5px;
}

.loc-coord,
#game-time {
    color: #93a4bf;
}

.mini-btn {
    background: rgba(148, 163, 184, 0.12);
    border: 1px solid rgba(148, 163, 184, 0.26);
    color: #dbeafe;
}

.mini-btn:hover {
    background: rgba(59, 130, 246, 0.18);
    border-color: rgba(96, 165, 250, 0.6);
    color: #eff6ff;
}

.status-row {
    background: rgba(4, 8, 20, 0.78);
    border-bottom: 1px solid rgba(148, 163, 184, 0.15);
}

.main-area {
    gap: 14px;
    padding: 12px;
}

.left-col {
    width: 300px;
}

.left-controls {
    width: 170px;
}

.map-panel,
.msg-box,
.res-box {
    border-color: rgba(148, 163, 184, 0.22);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
}

.world-map-container {
    min-height: 210px;
    max-height: 260px;
}

.msg-content {
    min-height: 240px;
}

#message-log:empty::before {
    content: '暂无动态，尝试移动、采集或战斗后会显示记录';
    display: block;
    color: rgba(148, 163, 184, 0.75);
    font-size: 13px;
    padding: 6px 0;
}

.res-box {
    min-height: 190px;
}

.res-list {
    min-height: 84px;
}

.bot-nav {
    background: linear-gradient(180deg, rgba(11, 17, 33, 0.94) 0%, rgba(8, 13, 25, 0.98) 100%);
    border-top: 1px solid rgba(148, 163, 184, 0.2);
}

.nav-b {
    border-color: rgba(148, 163, 184, 0.24);
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.42) 0%, rgba(15, 23, 42, 0.45) 100%);
}

.nav-b .nav-label {
    letter-spacing: 0.2px;
    text-transform: none;
    font-size: 13px;
}

.nav-b.active,
.nav-b:hover {
    border-color: rgba(250, 204, 21, 0.65);
    box-shadow: 0 10px 22px rgba(250, 204, 21, 0.18);
}

@media (max-width: 1280px) {
    .left-col {
        width: 260px;
    }
    .left-controls {
        width: 150px;
    }
}

@keyframes toastIn {
    from { opacity: 0; transform: translateY(-10px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toastOut {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to { opacity: 0; transform: translateY(-10px) scale(0.95); }
}