/* Mistfold Global Styles */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;overflow:hidden;font-family:'Microsoft YaHei',sans-serif}
body{background:#1a1a2e;color:#fff;user-select:none;-webkit-user-select:none}
body>canvas{display:block;position:fixed;top:0;left:0;z-index:1}
canvas{display:block}
input,button{font-family:inherit;outline:none}
.login-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;background:linear-gradient(135deg,#1a1a2e 0%,#16213e 50%,#0f3460 100%);padding:20px}
.login-logo{font-size:36px;font-weight:bold;color:#4ecca3;margin-bottom:8px;text-shadow:0 0 20px rgba(78,204,163,0.5);letter-spacing:2px}
.login-subtitle{color:#a0a0b0;font-size:13px;margin-bottom:30px}
.login-box{background:rgba(255,255,255,0.08);border-radius:12px;padding:24px;width:100%;max-width:340px;backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.1)}
.login-tabs{display:flex;margin-bottom:20px;border-bottom:2px solid rgba(255,255,255,0.1)}
.login-tab{flex:1;padding:10px;text-align:center;cursor:pointer;color:#888;font-size:15px;transition:all .2s;border-bottom:2px solid transparent;margin-bottom:-2px}
.login-tab.active{color:#4ecca3;border-bottom-color:#4ecca3}
.login-input{width:100%;padding:12px 14px;margin-bottom:12px;border-radius:8px;border:1px solid rgba(255,255,255,0.15);background:rgba(0,0,0,0.3);color:#fff;font-size:15px;transition:border .2s}
.login-input:focus{border-color:#4ecca3}
.login-btn{width:100%;padding:14px;border:none;border-radius:8px;font-size:16px;font-weight:bold;cursor:pointer;transition:all .2s;color:#fff;background:linear-gradient(135deg,#4ecca3,#38a3a5)}
.login-btn:active{transform:scale(0.98)}
.login-btn:disabled{opacity:0.5}
.login-error{color:#ff6b6b;font-size:13px;margin-bottom:10px;min-height:18px}
.login-hint{color:#666;font-size:12px;margin-top:14px;text-align:center;line-height:1.6}
.servers-screen{height:100vh;display:flex;flex-direction:column;background:linear-gradient(135deg,#1a1a2e 0%,#16213e 100%)}
.servers-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,0.08);background:rgba(0,0,0,0.2);flex-wrap:wrap;gap:6px}
.servers-title{font-size:18px;font-weight:bold;color:#4ecca3}
.servers-userinfo{font-size:13px;color:#aaa}
.servers-userinfo .admin-badge{background:#e94560;color:#fff;padding:2px 8px;border-radius:10px;font-size:11px;margin-left:6px}
.btn-logout{padding:6px 14px;border:1px solid rgba(255,255,255,0.15);border-radius:6px;background:transparent;color:#aaa;font-size:13px;cursor:pointer}
.btn-logout:active{background:rgba(255,255,255,0.05)}
.servers-list{flex:1;overflow-y:auto;padding:12px;-webkit-overflow-scrolling:touch}
.server-card{background:rgba(255,255,255,0.06);border-radius:12px;padding:16px;margin-bottom:10px;border:1px solid rgba(255,255,255,0.08);cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:space-between}
.server-card:active{transform:scale(0.98);background:rgba(255,255,255,0.1)}
.server-card-info{flex:1}
.server-card-name{font-size:16px;font-weight:bold;margin-bottom:4px}
.server-card-desc{font-size:13px;color:#888}
.server-card-meta{display:flex;gap:12px;margin-top:8px;font-size:12px}
.server-players{color:#4ecca3}
.server-players.full{color:#e94560}
.server-delete{padding:6px 10px;border:1px solid #e94560;border-radius:6px;background:transparent;color:#e94560;font-size:12px;cursor:pointer;margin-left:10px}
.servers-empty{text-align:center;color:#666;padding:60px 20px;font-size:14px}
.servers-footer{padding:12px 16px;border-top:1px solid rgba(255,255,255,0.08)}
.btn-create-server{width:100%;padding:14px;border:none;border-radius:8px;font-size:15px;font-weight:bold;cursor:pointer;color:#fff;background:linear-gradient(135deg,#4ecca3,#38a3a5)}
.btn-create-server:disabled{opacity:0.4}
.btn-create-server:active{transform:scale(0.98)}
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);display:none;align-items:center;justify-content:center;z-index:100;backdrop-filter:blur(4px)}
.modal-overlay.show{display:flex}
.modal-box{background:#1e2a3a;border-radius:12px;padding:24px;width:90%;max-width:360px;border:1px solid rgba(255,255,255,0.1)}
.modal-title{font-size:18px;font-weight:bold;margin-bottom:16px;color:#4ecca3}
.modal-input{width:100%;padding:12px;margin-bottom:12px;border-radius:8px;border:1px solid rgba(255,255,255,0.15);background:rgba(0,0,0,0.3);color:#fff;font-size:14px}
.modal-actions{display:flex;gap:10px;margin-top:16px}
.modal-btn{flex:1;padding:12px;border:none;border-radius:8px;font-size:14px;font-weight:bold;cursor:pointer;color:#fff}
.modal-btn.primary{background:#4ecca3}
.modal-btn.cancel{background:rgba(255,255,255,0.1)}
.loading-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.8);display:none;align-items:center;justify-content:center;z-index:200;flex-direction:column}
.loading-overlay.show{display:flex}
.loading-spinner{width:40px;height:40px;border:4px solid rgba(255,255,255,0.1);border-top-color:#4ecca3;border-radius:50%;animation:spin 0.8s linear infinite}
.loading-text{color:#4ecca3;margin-top:16px;font-size:14px}
@keyframes spin{to{transform:rotate(360deg)}}
/* === 受伤反馈 === */
.damage-overlay{position:fixed;inset:0;z-index:100;pointer-events:none;opacity:0;transition:opacity .08s;box-shadow:inset 0 0 80px 20px rgba(255,0,0,0);background:transparent}
.damage-overlay.hurt{opacity:1;animation:damageFlash .4s ease-out forwards}
.damage-overlay.dead{opacity:1;animation:deathFlash 1.2s ease-out forwards}
@keyframes damageFlash{0%{box-shadow:inset 0 0 100px 40px rgba(255,0,0,0.6);background:rgba(255,0,0,0.15)}30%{box-shadow:inset 0 0 60px 20px rgba(255,0,0,0.3);background:rgba(255,0,0,0.05)}100%{box-shadow:inset 0 0 0 0 rgba(255,0,0,0);background:transparent}}
@keyframes deathFlash{0%{box-shadow:inset 0 0 120px 60px rgba(255,0,0,0.8);background:rgba(200,0,0,0.35)}20%{box-shadow:inset 0 0 100px 50px rgba(255,0,0,0.6);background:rgba(200,0,0,0.2)}40%{box-shadow:inset 0 0 120px 60px rgba(255,0,0,0.7);background:rgba(200,0,0,0.3)}60%{box-shadow:inset 0 0 80px 40px rgba(255,0,0,0.4);background:rgba(200,0,0,0.1)}100%{box-shadow:inset 0 0 0 0 rgba(255,0,0,0);background:transparent}}
.toast{position:fixed;top:50px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,0.85);color:#fff;padding:10px 20px;border-radius:8px;font-size:14px;z-index:300;opacity:0;transition:opacity .3s;pointer-events:none;white-space:nowrap;max-width:90%}
.toast.show{opacity:1}
.game-hud{position:fixed;inset:0;pointer-events:none;z-index:2}
.joystick-zone{position:fixed;bottom:80px;left:0;width:40%;height:30%;pointer-events:none;z-index:10}
.joystick-base{position:fixed;width:120px;height:120px;border-radius:50%;border:2px solid rgba(255,255,255,0.2);background:rgba(0,0,0,0.2);display:none;pointer-events:none}
.joystick-knob{position:fixed;width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,0.3);border:2px solid rgba(255,255,255,0.5);display:none;pointer-events:none}
.look-zone{position:fixed;top:0;right:0;width:50%;height:55%;pointer-events:none;z-index:5}
/* === 王者荣耀风格技能弧形布局 === */
/* 普攻键 = 攻击(挖) - 右下角最大按钮 */
.btn-break{position:fixed;bottom:35px;right:25px;width:100px;height:100px;border-radius:50%;border:2px solid rgba(233,69,96,0.6);background:rgba(233,69,96,0.25);color:#fff;font-size:18px;font-weight:bold;display:flex;align-items:center;justify-content:center;cursor:pointer;pointer-events:auto;z-index:20;box-shadow:0 0 16px rgba(233,69,96,0.3)}
.btn-break:active{background:rgba(233,69,96,0.55);box-shadow:0 0 18px rgba(233,69,96,0.5)}
/* 一技能 = 蹲（攻击键正左方，弧形90°） */
.btn-sneak{position:fixed;bottom:50px;right:170px;width:60px;height:60px;border-radius:50%;border:2px solid rgba(100,149,237,0.5);background:rgba(100,149,237,0.2);color:#6495ff;font-size:18px;font-weight:bold;display:flex;align-items:center;justify-content:center;cursor:pointer;pointer-events:auto;z-index:20;transition:background .1s,border-color .1s}
.btn-sneak:active,.btn-sneak.active{background:rgba(100,149,237,0.45);border-color:rgba(100,149,237,0.9);color:#fff}
/* 二技能 = 冲（左上方，弧形60°） */
.btn-sprint{position:fixed;bottom:115px;right:153px;width:60px;height:60px;border-radius:50%;border:2px solid rgba(255,200,0,0.4);background:rgba(0,0,0,0.3);color:#ffc800;font-size:18px;font-weight:bold;display:flex;align-items:center;justify-content:center;cursor:pointer;pointer-events:auto;z-index:20;transition:background .1s,border-color .1s}
.btn-sprint:active,.btn-sprint.active{background:rgba(255,200,0,0.35);border-color:rgba(255,200,0,0.8)}
.btn-sprint.exhausted{opacity:0.4;border-color:rgba(255,255,255,0.15)}
/* 三技能 = 放置/锄地（更上方，弧形30°；拿锄头时自动切换为锄地键） */
.btn-place{position:fixed;bottom:163px;right:105px;width:60px;height:60px;border-radius:50%;border:2px solid rgba(78,204,163,0.5);background:rgba(78,204,163,0.2);color:#fff;font-size:14px;font-weight:bold;display:flex;align-items:center;justify-content:center;cursor:pointer;pointer-events:auto;z-index:20}
.btn-place:active{background:rgba(78,204,163,0.5)}
.btn-till{position:fixed;bottom:163px;right:105px;width:60px;height:60px;border-radius:50%;border:2px solid rgba(139,90,43,0.5);background:rgba(139,90,43,0.2);color:#fff;font-size:14px;font-weight:bold;display:flex;align-items:center;justify-content:center;cursor:pointer;pointer-events:auto;z-index:20;display:none}
.btn-till:active{background:rgba(139,90,43,0.5)}
/* 使用按钮（矩形，在"冲"左边） — 对准工作台/熔炉/箱子时显示 */
.btn-use{position:fixed;bottom:130px;right:222px;width:72px;height:40px;border-radius:6px;border:2px solid rgba(120,180,255,0.7);background:rgba(60,120,200,0.35);color:#cdf;font-size:15px;font-weight:bold;display:flex;align-items:center;justify-content:center;cursor:pointer;pointer-events:auto;z-index:20;box-shadow:0 0 12px rgba(80,150,255,0.3);transition:background .1s}
.btn-use:active{background:rgba(60,120,200,0.65);box-shadow:0 0 16px rgba(80,150,255,0.5)}
/* 四技能 = 跳（攻击键正上方，弧形0°） */
.btn-jump{position:fixed;bottom:180px;right:40px;width:60px;height:60px;border-radius:50%;border:2px solid rgba(255,255,255,0.3);background:rgba(0,0,0,0.3);color:#fff;font-size:20px;font-weight:bold;display:flex;align-items:center;justify-content:center;cursor:pointer;pointer-events:auto;z-index:20}
.btn-jump:active{background:rgba(78,204,163,0.4)}
.hotbar{position:fixed;bottom:8px;left:50%;transform:translateX(-50%);display:flex;gap:2px;padding:3px;background:transparent;border:2px solid #444;z-index:200;pointer-events:auto;touch-action:none;max-width:calc(100vw - 8px)}
.hotbar-bg{position:absolute;inset:0;background:#555;box-shadow:inset 1px 1px 0 #666,inset -1px -1px 0 #333;z-index:-1;pointer-events:none;transition:opacity .15s}
.hotbar-slot{width:min(44px,calc((100vw - 50px) / 9));height:min(44px,calc((100vw - 50px) / 9));min-width:32px;border-radius:0;border:2px solid #555;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;pointer-events:auto;touch-action:none;flex-shrink:0}
.hotbar-slot.active{border-color:#fff}
.hotbar-slot-bg{position:absolute;inset:0;background:#8b8b8b;box-shadow:inset 1px 1px 0 #aaa,inset -1px -1px 0 #666;z-index:-1;pointer-events:none;transition:opacity .15s}
.hotbar-slot.active .hotbar-slot-bg{background:#9f9f9f;box-shadow:inset 1px 1px 0 #ccc,inset -1px -1px 0 #777}
.hotbar-slot canvas{width:min(32px,7vw);height:min(32px,7vw);image-rendering:pixelated;position:static;pointer-events:none}
.hotbar-slot-num{position:absolute;top:1px;left:3px;font-size:9px;color:rgba(255,255,255,0.5)}
.hud-topbar{position:fixed;top:8px;left:8px;right:8px;display:flex;justify-content:space-between;align-items:flex-start;z-index:15;pointer-events:none}
.hud-server-info{background:rgba(0,0,0,0.4);padding:6px 12px;border-radius:6px;font-size:12px;pointer-events:auto}
.hud-server-name{color:#4ecca3;font-weight:bold}
.hud-player-count{color:#aaa;font-size:11px}
.hud-coords{color:#aaa;font-size:11px;background:rgba(0,0,0,0.4);padding:6px 12px;border-radius:6px}
.hud-biome{color:#7fc7ff;font-size:11px;background:rgba(0,0,0,0.4);padding:6px 12px;border-radius:6px;margin-left:8px}
.hud-clock{color:#fff;font-size:14px;font-weight:bold;background:rgba(0,0,0,0.4);padding:6px 12px;border-radius:6px;min-width:56px;text-align:center}
.hud-clock.night{color:#8ab4ff}
.hud-clock.dusk{color:#ff9944}
.hud-clock.dawn{color:#ffcc66}
.btn-menu{position:fixed;top:8px;right:8px;width:40px;height:40px;border:2px solid #555;border-radius:0;background:#8b8b8b;box-shadow:inset 1px 1px 0 #aaa,inset -1px -1px 0 #666;cursor:pointer;pointer-events:auto;z-index:252;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.btn-menu span{display:block;width:20px;height:2px;background:#3f3f3f;border-radius:0;transition:transform .25s,opacity .25s}
.btn-menu:active{background:#6d6d6d}
.btn-menu.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.btn-menu.open span:nth-child(2){opacity:0}
.btn-menu.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.crosshair{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:20px;height:20px;pointer-events:none;z-index:12}
.crosshair::before,.crosshair::after{content:'';position:absolute;background:rgba(255,255,255,0.6)}
.crosshair::before{top:50%;left:0;right:0;height:2px;transform:translateY(-50%)}
.crosshair::after{left:50%;top:0;bottom:0;width:2px;transform:translateX(-50%)}
.hud-block-name{position:fixed;top:42px;left:50%;transform:translateX(-50%);color:#fff;font-size:12px;background:rgba(0,0,0,0.5);padding:3px 10px;border-radius:4px;z-index:15;pointer-events:none;white-space:nowrap;display:none}
.player-name-tag{position:absolute;color:#fff;font-size:11px;font-weight:bold;text-shadow:1px 1px 2px #000,-1px -1px 2px #000;pointer-events:none;transform:translate(-50%,-100%);white-space:nowrap;z-index:8}
.chat-messages{position:fixed;bottom:60px;left:10px;max-width:60%;z-index:15;pointer-events:none}
.chat-msg{background:rgba(0,0,0,0.5);color:#fff;padding:4px 10px;border-radius:4px;font-size:12px;margin-bottom:3px;word-break:break-all;animation:fadeOut 5s forwards}
@keyframes fadeOut{0%,70%{opacity:1}100%{opacity:0}}
/* === 菜单面板 === */
.menu-overlay{position:fixed;inset:0;z-index:250;background:rgba(0,0,0,0.55);opacity:0;pointer-events:none;transition:opacity .3s}
.menu-overlay.open{opacity:1;pointer-events:auto}
.menu-panel{position:absolute;top:0;right:0;bottom:0;width:45%;min-width:300px;max-width:420px;display:flex;background:#c6c6c6;border-left:3px solid #555;box-shadow:-4px 0 24px rgba(0,0,0,0.5);transform:translateX(100%);transition:transform .3s ease;image-rendering:pixelated}
.menu-overlay.open .menu-panel{transform:translateX(0)}
.menu-main{flex:1;display:flex;flex-direction:column;padding:16px 14px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.menu-player{display:flex;align-items:center;gap:12px;margin-bottom:18px;padding:10px 12px;background:#8b8b8b;border:3px solid #555;box-shadow:inset 2px 2px 0 #aaa,inset -2px -2px 0 #666}
.menu-avatar{width:54px;height:54px;border-radius:3px;background:linear-gradient(135deg,#5a8a3a,#3d6b24);display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:bold;color:#fff;flex-shrink:0;border:2px solid #2d5016;image-rendering:pixelated}
.menu-player-text{flex:1;min-width:0}
.menu-player-name{font-size:16px;font-weight:bold;color:#3f3f3f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.menu-player-meta{margin-top:5px;display:flex;align-items:center;gap:6px}
.menu-level{font-size:11px;color:#fff;background:#3f8a2e;padding:2px 8px;border-radius:0;border:1px solid #2d6b1e}
.menu-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.menu-tile{grid-column:span 1;height:clamp(54px,15vw,78px);background:#8b8b8b;border:2px solid #555;box-shadow:inset 2px 2px 0 #aaa,inset -2px -2px 0 #666;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;transition:background .08s}
.menu-tile:active{background:#6d6d6d;box-shadow:inset 2px 2px 0 #666,inset -2px -2px 0 #555}
.menu-tile-wide{grid-column:span 2;flex-direction:row;justify-content:flex-start;gap:10px;padding:0 12px}
.menu-tile-icon{font-size:24px;line-height:1}
.menu-tile-wide .menu-tile-icon{font-size:28px}
.menu-tile-label{font-size:11px;color:#3f3f3f;text-align:center;white-space:nowrap}
.menu-tile-wide .menu-tile-label{font-size:13px;color:#3f3f3f;font-weight:bold}
.menu-tile-placeholder{background:#7a7a7a;border:2px dashed #666;box-shadow:none}
.menu-tile-placeholder:active{transform:none;background:#7a7a7a}
.menu-reserved-hint{margin-top:14px;text-align:center;font-size:11px;color:#666}
.menu-sidebar{width:44px;flex-shrink:0;background:#8b8b8b;border-left:3px solid #555;display:flex;flex-direction:column;align-items:center;padding:12px 0;gap:8px}
.menu-side-slot{width:30px;height:30px;border-radius:0;background:#555;border:2px solid #444;box-shadow:inset 1px 1px 0 #666,inset -1px -1px 0 #333}
.menu-side-spacer{flex:1}
.menu-side-icon{width:34px;height:34px;border-radius:0;display:flex;align-items:center;justify-content:center;color:#3f3f3f;cursor:pointer;border:2px solid #555;background:#8b8b8b;box-shadow:inset 1px 1px 0 #aaa,inset -1px -1px 0 #666;transition:background .08s}
.menu-side-icon:active{background:#6d6d6d;color:#222}
.menu-side-icon svg{display:block}
/* === 弧形进度条（体力 + 挖掘） === */
.arc-bars{position:fixed;right:75px;bottom:85px;width:200px;height:200px;pointer-events:none;z-index:21;overflow:visible}
/* 挖掘进度条(外层) - 不挖时整体隐藏 */
.arc-mining-group{opacity:0;transition:opacity .15s}
.arc-mining-group.active{opacity:1}
.arc-mining-bg{fill:none;stroke:rgba(0,0,0,0.35);stroke-width:6;stroke-linecap:round}
.arc-mining-fg{fill:none;stroke:#e94560;stroke-width:6;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .05s}
/* 体力条(内层) */
.arc-stamina-group{transition:opacity .3s}
.arc-stamina-group.hidden{opacity:0}
.arc-stamina-bg{fill:none;stroke:rgba(0,0,0,0.3);stroke-width:8;stroke-linecap:round}
.arc-stamina-fg{fill:none;stroke:#ffc800;stroke-width:8;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:0;transition:stroke-dashoffset .15s,stroke .15s}
.arc-stamina-fg.low{stroke:#e94560}
/* === 血条 & 饥饿度 === */
.hud-status{position:fixed;top:40px;left:8px;right:52px;display:flex;justify-content:space-between;pointer-events:none;z-index:15}
.health-bar,.hunger-bar{display:flex;gap:1px}
.health-bar .heart,.hunger-bar .hunger{width:9px;height:9px;display:inline-block;background-size:contain;background-repeat:no-repeat}
.health-bar .heart.full{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 14s-5.5-3.5-5.5-7A3 3 0 0 1 8 4.5 3 3 0 0 1 13.5 7C13.5 10.5 8 14 8 14z' fill='%23e94560' stroke='%23800a1e' stroke-width='1'/%3E%3C/svg%3E")}
.health-bar .heart.half{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 14s-5.5-3.5-5.5-7A3 3 0 0 1 8 4.5 3 3 0 0 1 13.5 7C13.5 10.5 8 14 8 14z' fill='%23800a1e' stroke='%23800a1e' stroke-width='1'/%3E%3Cpath d='M8 14s-5.5-3.5-5.5-7A3 3 0 0 1 8 4.5' fill='%23e94560' stroke='none'/%3E%3C/svg%3E")}
.health-bar .heart.empty{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 14s-5.5-3.5-5.5-7A3 3 0 0 1 8 4.5 3 3 0 0 1 13.5 7C13.5 10.5 8 14 8 14z' fill='%23333' stroke='%23555' stroke-width='1'/%3E%3C/svg%3E")}
.hunger-bar .hunger.full{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 2h3l2 4-2 4H3L1 6zm6 0h3l2 4-2 4H9L7 6zm1 8l2 2-2 2-2-2z' fill='%23c89040' stroke='%23705020' stroke-width='0.5'/%3E%3C/svg%3E")}
.hunger-bar .hunger.half{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 2h3l2 4-2 4H3L1 6zm6 0h3l2 4-2 4H9L7 6z' fill='%23705020' stroke='%23705020' stroke-width='0.5'/%3E%3Cpath d='M3 2h3l2 4-2 4H3L1 6' fill='%23c89040' stroke='none'/%3E%3C/svg%3E")}
.hunger-bar .hunger.empty{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 2h3l2 4-2 4H3L1 6zm6 0h3l2 4-2 4H9L7 6z' fill='%23333' stroke='%23555' stroke-width='0.5'/%3E%3C/svg%3E")}
/* === 物品栏数量 === */
.hotbar-slot-count{position:absolute;bottom:1px;right:2px;font-size:9px;color:#fff;font-weight:bold;text-shadow:1px 1px 1px #000,-1px -1px 1px #000;pointer-events:none;z-index:1}
.hotbar-slot canvas{position:static;pointer-events:none;image-rendering:auto}
/* === 背包面板 === */
.inv-overlay{position:fixed;inset:0;z-index:210;background:rgba(0,0,0,0.65);display:none;align-items:center;justify-content:center;pointer-events:auto}
.inv-overlay.open{display:flex}
.inv-panel{width:min(96vw,600px);background:#c6c6c6;border:3px solid #555;box-shadow:inset 3px 3px 0 #ddd,inset -3px -3px 0 #999;padding:14px;display:flex;flex-direction:column;gap:10px;max-height:94vh;overflow-y:auto;-webkit-overflow-scrolling:touch;image-rendering:pixelated}
.inv-main-row{display:flex;gap:10px}
.inv-left{flex:5;min-width:0}
.inv-right{flex:6;min-width:0;display:flex;flex-direction:column;gap:6px}
.inv-section-label{font-size:12px;color:#3f3f3f;font-weight:bold;margin-bottom:5px;text-shadow:1px 1px 0 #eee}
.inv-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:2px}
.inv-hotbar-grid{grid-template-columns:repeat(9,1fr)}
.inv-slot{aspect-ratio:1;background:#8b8b8b;border:2px solid #555;box-shadow:inset 1px 1px 0 #aaa,inset -1px -1px 0 #666;display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer;touch-action:none;user-select:none}
.inv-slot:hover{background:#a0a0a0}
.inv-slot.selected{border-color:#fff;background:#9f9f9f;box-shadow:inset 1px 1px 0 #ccc,inset -1px -1px 0 #777}
.inv-slot.drag-over{border-color:#fff;background:#aaa}
.inv-slot canvas{width:70%;height:70%;pointer-events:none;image-rendering:auto;position:absolute}
.inv-slot-count{position:absolute;bottom:1px;right:2px;font-size:9px;color:#fff;font-weight:bold;text-shadow:1px 1px 1px #000,-1px -1px 1px #000;pointer-events:none;z-index:1}
/* 合成栏 */
.inv-craft{display:flex;align-items:center;gap:10px}
.craft-input-wrap{background:#555;border:2px solid #444;box-shadow:inset 1px 1px 0 #666,inset -1px -1px 0 #333;padding:3px;flex-shrink:0}
.craft-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2px}
.craft-grid.craft-3x3{grid-template-columns:repeat(3,1fr)}
.craft-grid .inv-slot{aspect-ratio:1;width:clamp(32px,8vw,44px);height:clamp(32px,8vw,44px)}
.craft-grid.craft-3x3 .inv-slot{width:clamp(28px,7vw,40px);height:clamp(28px,7vw,40px)}
.craft-arrow{font-size:24px;color:#3f3f3f;flex-shrink:0;font-weight:bold;text-shadow:1px 1px 0 #ddd}
.craft-result{flex-shrink:0}
.craft-result .inv-slot{width:clamp(36px,8vw,48px);height:clamp(36px,8vw,48px);border-color:#3f8a2e;background:#8b8b8b;box-shadow:inset 1px 1px 0 #aaa,inset -1px -1px 0 #666}
/* 物品信息 */
.inv-info{min-height:36px;background:#8b8b8b;border:2px solid #555;box-shadow:inset 1px 1px 0 #aaa,inset -1px -1px 0 #666;padding:6px 8px;font-size:11px;color:#3f3f3f;line-height:1.4}
.inv-info .info-name{color:#3f3f3f;font-size:13px;font-weight:bold;text-shadow:1px 1px 0 #ddd}
.inv-info .info-desc{margin-top:2px;color:#555}

/* === 悬浮物品信息窗 === */
.item-popup{position:fixed;z-index:400;width:200px;background:#c6c6c6;border:3px solid #555;box-shadow:inset 2px 2px 0 #ddd,inset -2px -2px 0 #999,4px 4px 16px rgba(0,0,0,0.6);padding:0;image-rendering:pixelated;pointer-events:none}
.item-popup .popup-info{padding:8px 10px;background:#8b8b8b;border-bottom:2px solid #555;box-shadow:inset 1px 1px 0 #aaa,inset -1px -1px 0 #666}
.item-popup .popup-name{font-size:13px;font-weight:bold;color:#3f3f3f;text-shadow:1px 1px 0 #ddd;line-height:1.3}
.item-popup .popup-desc{font-size:11px;color:#555;margin-top:3px;line-height:1.3}
.item-popup .popup-buttons{display:grid;grid-template-columns:1fr 1fr;gap:3px;padding:4px}
.item-popup .popup-btn{padding:7px 4px;border:2px solid #555;background:#8b8b8b;box-shadow:inset 1px 1px 0 #aaa,inset -1px -1px 0 #666;color:#3f3f3f;font-size:11px;font-weight:bold;cursor:pointer;text-shadow:1px 1px 0 #ddd;font-family:inherit;transition:background .08s;text-align:center;pointer-events:auto}
.item-popup .popup-btn:active{background:#6d6d6d;box-shadow:inset 1px 1px 0 #666,inset -1px -1px 0 #555}
.item-popup .popup-btn-drop{color:#c0392b;border-color:#c0392b}
.item-popup .popup-btn-drop:active{background:#c0392b;color:#fff}
.item-popup .popup-btn-dropall{color:#e74c3c;border-color:#e74c3c}
.item-popup .popup-btn-dropall:active{background:#e74c3c;color:#fff}
.item-popup .popup-btn-split{color:#2980b9;border-color:#2980b9}
.item-popup .popup-btn-split:active{background:#2980b9;color:#fff}
.item-popup .popup-btn-reserved{color:#7f8c8d;border-color:#7f8c8d}
.item-popup .popup-btn-reserved:active{background:#7f8c8d;color:#fff}
/* 拖动幽灵 */
.drag-ghost{position:fixed;pointer-events:none;z-index:9999;width:40px;height:40px;background:#8b8b8b;border:2px solid #555;box-shadow:inset 1px 1px 0 #aaa,inset -1px -1px 0 #666;display:flex;align-items:center;justify-content:center;opacity:0.85;transform:translate(-50%,-50%)}
.drag-ghost canvas{width:28px;height:28px;pointer-events:none;image-rendering:auto}
.drag-ghost .inv-slot-count{position:absolute;bottom:1px;right:2px;font-size:8px;color:#fff;font-weight:bold;text-shadow:1px 1px 1px #000}
/* === 熔炉窗口（复用 inv-craft 布局模式） === */
.furnace-area{display:flex;align-items:center;gap:10px}
.furnace-input-wrap{background:#555;border:2px solid #444;box-shadow:inset 1px 1px 0 #666,inset -1px -1px 0 #333;padding:3px;flex-shrink:0}
.furnace-col{display:flex;flex-direction:column;align-items:center;gap:2px}
.furnace-col .inv-slot{width:clamp(32px,8vw,44px);height:clamp(32px,8vw,44px)}
/* 火苗区域 */
.furnace-flame-wrap{width:clamp(32px,8vw,44px);height:clamp(20px,5vw,28px);display:flex;align-items:flex-end;justify-content:center;position:relative;overflow:hidden;background:#3a3a3a;border:1px solid #444;box-shadow:inset 1px 1px 0 #555}
.furnace-flame{width:100%;height:0%;background:linear-gradient(0deg,#ff4400 0%,#ff8800 40%,#ffcc00 80%,#ffee66 100%);transition:height .3s ease-out;position:relative}
.furnace-flame.active{animation:furnaceFlame .5s ease-in-out infinite alternate}
@keyframes furnaceFlame{from{filter:brightness(0.9)}to{filter:brightness(1.2)}}
/* 烹饪进度箭头（复用 craft-arrow 样式） */
.furnace-arrow{flex-shrink:0;width:clamp(20px,5vw,28px);height:clamp(36px,8vw,48px);position:relative;overflow:hidden}
.furnace-arrow::before{content:'';position:absolute;top:50%;left:0;right:0;height:3px;background:#555;transform:translateY(-50%)}
.furnace-arrow::after{content:'';position:absolute;top:50%;right:0;width:0;height:0;border-left:8px solid #555;border-top:5px solid transparent;border-bottom:5px solid transparent;transform:translateY(-50%)}
.furnace-arrow .furnace-arrow-fill{position:absolute;top:50%;left:0;height:3px;background:#e0e0e0;transform:translateY(-50%);width:0%;transition:width .3s ease-out;z-index:1}
/* 产物格（复用 craft-result 样式） */
.furnace-output-wrap{flex-shrink:0}
.furnace-output-wrap .inv-slot{width:clamp(36px,8vw,48px);height:clamp(36px,8vw,48px);border-color:#3f8a2e;background:#8b8b8b;box-shadow:inset 1px 1px 0 #aaa,inset -1px -1px 0 #666}
.furnace-output-wrap .inv-slot.selected,.furnace-output-wrap .inv-slot.drag-over{border-color:#fff}
.inv-divider{height:2px;background:#555;margin:8px 0;box-shadow:0 1px 0 #777}
/* === 箱子窗口 === */
.chest-panel{width:min(96vw,520px)}
.chest-title{font-size:15px;font-weight:bold;color:#3f3f3f;text-shadow:1px 1px 0 #eee;text-align:center;margin-bottom:4px}
.chest-grid{grid-template-columns:repeat(9,1fr)!important}
.chest-grid .inv-slot{min-width:28px}
/* === 设置面板 === */
.settings-overlay{position:fixed;inset:0;z-index:260;background:rgba(0,0,0,0.55);display:none;align-items:center;justify-content:center;pointer-events:auto}
.settings-overlay.open{display:flex}
.settings-panel{width:min(92vw,400px);background:#c6c6c6;border:3px solid #555;box-shadow:inset 3px 3px 0 #ddd,inset -3px -3px 0 #999,4px 4px 16px rgba(0,0,0,0.5);display:flex;flex-direction:column;max-height:88vh;image-rendering:pixelated}
.settings-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:#8b8b8b;border-bottom:3px solid #555;box-shadow:inset 2px 2px 0 #aaa,inset -2px -2px 0 #666}
.settings-title{font-size:16px;font-weight:bold;color:#3f3f3f;text-shadow:1px 1px 0 #eee}
.settings-close{width:28px;height:28px;border:2px solid #555;background:#8b8b8b;box-shadow:inset 1px 1px 0 #aaa,inset -1px -1px 0 #666;color:#3f3f3f;font-size:16px;font-weight:bold;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;padding:0}
.settings-close:active{background:#6d6d6d}
.settings-body{padding:12px 14px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.settings-category{margin-bottom:14px}
.settings-cat-label{font-size:13px;font-weight:bold;color:#3f3f3f;text-shadow:1px 1px 0 #eee;margin-bottom:8px;padding:4px 10px;background:#aaa;border:2px solid #555;box-shadow:inset 1px 1px 0 #ccc,inset -1px -1px 0 #888;display:inline-block}
.settings-item{background:#8b8b8b;border:2px solid #555;box-shadow:inset 2px 2px 0 #aaa,inset -2px -2px 0 #666;padding:10px 12px;margin-bottom:6px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.settings-item-col{flex-direction:column;align-items:stretch}
.settings-item-label{font-size:13px;color:#3f3f3f;font-weight:bold;text-shadow:1px 1px 0 #ddd}
.settings-slider-row{display:flex;align-items:center;gap:10px}
.settings-slider{-webkit-appearance:none;appearance:none;flex:1;height:8px;background:#555;border:2px solid #444;box-shadow:inset 1px 1px 0 #666,inset -1px -1px 0 #333;border-radius:0;outline:none;cursor:pointer}
.settings-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:20px;background:#4ecca3;border:2px solid #3aa882;box-shadow:inset 1px 1px 0 #7aecd0,inset -1px -1px 0 #3aa882;cursor:pointer;border-radius:0}
.settings-slider::-moz-range-thumb{width:18px;height:20px;background:#4ecca3;border:2px solid #3aa882;box-shadow:inset 1px 1px 0 #7aecd0,inset -1px -1px 0 #3aa882;cursor:pointer;border-radius:0}
.settings-slider-val{font-size:13px;color:#3f3f3f;font-weight:bold;text-shadow:1px 1px 0 #ddd;min-width:36px;text-align:right}
/* 视角选择按钮 */
.settings-view-row{display:flex;gap:6px}
.view-btn{flex:1;padding:8px 4px;border:2px solid #555;background:#8b8b8b;box-shadow:inset 1px 1px 0 #aaa,inset -1px -1px 0 #666;color:#3f3f3f;font-size:12px;font-weight:bold;cursor:pointer;transition:background .08s;text-shadow:1px 1px 0 #ddd;font-family:inherit;touch-action:manipulation}
.view-btn:active{background:#6d6d6d}
.view-btn.active{background:#3f8a2e;border-color:#2d6b1e;color:#fff;box-shadow:inset 1px 1px 0 #5ab840,inset -1px -1px 0 #2d6b1e;text-shadow:1px 1px 0 #2d6b1e}
/* 光照效果开关 */
.settings-toggle{position:relative;display:inline-block;width:44px;height:22px;flex-shrink:0}
.settings-toggle input{opacity:0;width:0;height:0;position:absolute}
.toggle-slider{position:absolute;cursor:pointer;inset:0;background:#555;border:2px solid #444;box-shadow:inset 1px 1px 0 #666,inset -1px -1px 0 #333;transition:background .15s;border-radius:0}
.toggle-slider:before{content:"";position:absolute;height:14px;width:14px;left:2px;top:2px;background:#aaa;box-shadow:1px 1px 0 #ccc,-1px -1px 0 #888;transition:transform .15s}
.settings-toggle input:checked+.toggle-slider{background:#3f8a2e;border-color:#2d6b1e;box-shadow:inset 1px 1px 0 #5ab840,inset -1px -1px 0 #2d6b1e}
.settings-toggle input:checked+.toggle-slider:before{transform:translateX(22px);background:#fff}
.settings-toggle input:disabled+.toggle-slider{opacity:0.4;cursor:not-allowed}

/* === Mistfold 风格主菜单 === */
.mf-menu{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1a1a2e 0%,#16213e 50%,#0f3460 100%);z-index:10}
.mf-menu-overlay{position:absolute;inset:0;background:rgba(0,0,0,0.3)}
.mf-menu-content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;width:100%;max-width:420px;padding:20px}
.mf-logo{margin-bottom:40px;text-align:center}
.mf-logo-title{font-size:48px;font-weight:900;color:#4ecca3;text-shadow:3px 3px 0 #2d6b1e,4px 4px 8px rgba(0,0,0,0.5);letter-spacing:4px;line-height:1.1}
.mf-logo-edition{font-size:14px;color:#aaa;margin-top:4px;letter-spacing:2px}
.mf-menu-buttons{width:100%;max-width:320px;display:flex;flex-direction:column;gap:8px}
.mf-btn{width:100%;padding:12px 16px;border:3px solid #555;background:#8b8b8b;box-shadow:inset 2px 2px 0 #aaa,inset -2px -2px 0 #666,4px 4px 0 rgba(0,0,0,0.3);color:#3f3f3f;font-size:16px;font-weight:bold;cursor:pointer;text-shadow:1px 1px 0 #ddd;font-family:inherit;text-align:center;transition:background .08s;position:relative;user-select:none}
.mf-btn:active{background:#6d6d6d;box-shadow:inset 2px 2px 0 #666,inset -2px -2px 0 #555,2px 2px 0 rgba(0,0,0,0.3);transform:translate(2px,2px)}
.mf-btn-primary{background:#3f8a2e;border-color:#2d6b1e;color:#fff;box-shadow:inset 2px 2px 0 #5ab840,inset -2px -2px 0 #2d6b1e,4px 4px 0 rgba(0,0,0,0.3);text-shadow:1px 1px 0 #2d6b1e;font-size:20px;padding:16px 16px}
.mf-btn-primary:active{background:#2d6b1e;box-shadow:inset 2px 2px 0 #3f8a2e,inset -2px -2px 0 #2d6b1e,2px 2px 0 rgba(0,0,0,0.3)}
.mf-btn-secondary{background:#6d6d6d;border-color:#555;color:#fff;box-shadow:inset 2px 2px 0 #999,inset -2px -2px 0 #555,4px 4px 0 rgba(0,0,0,0.3);text-shadow:1px 1px 0 #444}
.mf-btn-secondary:active{background:#555;box-shadow:inset 2px 2px 0 #777,inset -2px -2px 0 #444,2px 2px 0 rgba(0,0,0,0.3)}
.mf-btn-sm{padding:8px 14px;font-size:13px;border-width:2px;box-shadow:inset 1px 1px 0 #aaa,inset -1px -1px 0 #666,2px 2px 0 rgba(0,0,0,0.3)}
.mf-btn-sm:active{box-shadow:inset 1px 1px 0 #666,inset -1px -1px 0 #555;transform:translate(1px,1px)}
.mf-btn-half{width:48%;display:inline-block}
.mf-btn-row{display:flex;gap:8px;justify-content:center}
.mf-btn-row .mf-btn-half{width:calc(50% - 4px)}
.mf-btn-server-row{display:flex;flex-direction:column;gap:4px}
.mf-btn-server-label{font-size:11px;color:#888;padding-left:4px;text-shadow:none}
.mf-btn-arrow{float:right;margin-left:8px;opacity:0.7}
.mf-menu-footer{margin-top:30px;text-align:center}
.mf-menu-version{font-size:11px;color:#555}

/* === Mistfold 弹窗 === */
.mf-modal-overlay{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,0.7);display:none;align-items:center;justify-content:center;backdrop-filter:blur(2px)}
.mf-modal-overlay.show{display:flex}
.mf-modal{background:#c6c6c6;border:3px solid #555;box-shadow:inset 3px 3px 0 #ddd,inset -3px -3px 0 #999,6px 6px 20px rgba(0,0,0,0.5);width:min(92vw,400px);display:flex;flex-direction:column;max-height:80vh;image-rendering:pixelated}
.mf-modal-title{font-size:17px;font-weight:bold;color:#1a1a1a;text-shadow:1px 1px 0 #ddd;padding:12px 14px;background:#8b8b8b;border-bottom:3px solid #555;box-shadow:inset 2px 2px 0 #aaa,inset -2px -2px 0 #666}
.mf-modal-body{padding:12px;overflow-y:auto;flex:1;-webkit-overflow-scrolling:touch}
.mf-modal-footer{display:flex;gap:8px;padding:10px 12px;border-top:3px solid #555;background:#8b8b8b;box-shadow:inset 2px 2px 0 #aaa,inset -2px -2px 0 #666;justify-content:flex-end}
.mf-input{width:100%;padding:10px 12px;margin-bottom:10px;border:2px solid #555;background:#8b8b8b;box-shadow:inset 1px 1px 0 #666,inset -1px -1px 0 #aaa;color:#3f3f3f;font-size:14px;font-family:inherit}
.mf-input:focus{border-color:#4ecca3;outline:none}
.mf-input::placeholder{color:#777}
.mf-modal-wide{width:min(92vw,520px)}
.mf-form-group{margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid #999}
.mf-form-group:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.mf-form-label{display:block;font-size:13px;font-weight:bold;color:#3f3f3f;margin-bottom:8px;text-shadow:1px 1px 0 #ddd}
.mf-form-hint{font-weight:normal;color:#777;font-size:11px}
.mf-input-row{display:flex;gap:8px}
.mf-input-half{flex:1;min-width:0}
.mf-form-checkbox{display:flex;align-items:flex-start;gap:6px;margin-top:8px;font-size:12px;color:#3f3f3f;cursor:pointer;line-height:1.4}
.mf-form-checkbox input[type="checkbox"]{margin-top:2px;flex-shrink:0}
.mf-form-checkbox span{flex-shrink:0}
.mf-form-checkbox .mf-form-hint{display:block;margin-top:2px}

/* === 服务器列表 === */
.mf-server-list{display:flex;flex-direction:column;gap:6px}
.mf-server-card{background:#7a7a7a;border:2px solid #555;box-shadow:inset 2px 2px 0 #aaa,inset -2px -2px 0 #666;padding:10px 12px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;transition:background .08s}
.mf-server-card:active{background:#6d6d6d}
.mf-server-card.selected{border-color:#3f8a2e;background:#4a7a2a}
.mf-server-card.selected .mf-server-name{color:#fff;text-shadow:1px 1px 0 #2d6b1e}
.mf-server-card.selected .mf-server-desc{color:#ddd;text-shadow:1px 1px 0 #2d6b1e}
.mf-server-card.selected .mf-server-meta{color:#ddd}
.mf-server-card.selected .mf-server-players{color:#fff;text-shadow:1px 1px 2px rgba(0,0,0,0.6)}
.mf-server-card.selected .mf-server-players.full{color:#ff6b6b;text-shadow:1px 1px 2px rgba(0,0,0,0.6)}
.mf-server-card-info{flex:1;min-width:0}
.mf-server-name{font-size:15px;font-weight:bold;color:#1a1a1a;text-shadow:1px 1px 0 #ccc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mf-server-desc{font-size:12px;color:#333;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mf-server-meta{display:flex;gap:10px;margin-top:4px;font-size:12px;color:#333}
.mf-server-players{color:#fff;font-weight:bold;text-shadow:1px 1px 0 #2d6b1e}
.mf-server-players.full{color:#e94560}
.mf-server-edit{padding:4px 8px;border:2px solid #3b82f6;background:transparent;color:#3b82f6;font-size:11px;font-weight:bold;cursor:pointer;margin-left:8px;font-family:inherit}
.mf-server-edit:active{background:#3b82f6;color:#fff}
.mf-server-delete{padding:4px 8px;border:2px solid #e94560;background:transparent;color:#e94560;font-size:11px;font-weight:bold;cursor:pointer;margin-left:8px;font-family:inherit}
.mf-server-delete:active{background:#e94560;color:#fff}
.mf-server-empty{text-align:center;color:#333;padding:30px 10px;font-size:14px}

/* === 捏脸/皮肤编辑器 === */
.skin-editor{position:fixed;inset:0;z-index:50;background:#2a2a2a;display:flex;flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch}
.skin-editor-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:#1a1a1a;border-bottom:2px solid #555;flex-shrink:0}
.skin-editor-title{font-size:16px;font-weight:bold;color:#4ecca3}
.skin-editor-body{flex:1;display:flex;flex-direction:column;align-items:center;padding:12px;gap:12px;overflow-y:auto}
.skin-preview-wrap{width:min(100%,240px);aspect-ratio:1;background:#111;border:2px solid #555;position:relative}
.skin-preview-canvas{width:100%;height:100%;display:block;cursor:grab}
.skin-preview-canvas:active{cursor:grabbing}
.preview-play-btn{position:absolute;bottom:6px;right:6px;width:32px;height:32px;border:2px solid #555;background:#6d6d6d;box-shadow:inset 1px 1px 0 #999,inset -1px -1px 0 #555;color:#fff;font-size:16px;line-height:28px;text-align:center;cursor:pointer;font-family:inherit;padding:0;z-index:2;transition:background .08s}
.preview-play-btn:hover{background:#7d7d7d}
.preview-play-btn:active{background:#555}
.skin-part-label,.skin-face-label{width:100%;text-align:center;color:#888;font-size:10px;font-weight:bold;padding:2px 0;letter-spacing:1px;margin-top:4px}
.skin-part-label:first-child,.skin-face-label:first-child{margin-top:0}
.skin-part-tabs{display:flex;flex-wrap:wrap;gap:3px;justify-content:center;max-width:360px;max-height:120px;overflow-y:auto}
.skin-part-tab{padding:4px 8px;border:2px solid #555;background:#6d6d6d;box-shadow:inset 1px 1px 0 #999,inset -1px -1px 0 #555;color:#ccc;font-size:11px;font-weight:bold;cursor:pointer;font-family:inherit;text-shadow:1px 1px 0 #444;transition:background .08s}
.skin-part-tab:active{background:#555}
.skin-part-tab.active{background:#3f8a2e;border-color:#2d6b1e;color:#fff;text-shadow:1px 1px 0 #2d6b1e;box-shadow:inset 1px 1px 0 #5ab840,inset -1px -1px 0 #2d6b1e}
.skin-face-tabs{display:flex;flex-wrap:wrap;gap:3px;justify-content:center;max-width:360px}
.skin-face-tab{padding:4px 10px;border:2px solid #555;background:#6d6d6d;box-shadow:inset 1px 1px 0 #999,inset -1px -1px 0 #555;color:#ccc;font-size:11px;font-weight:bold;cursor:pointer;font-family:inherit;text-shadow:1px 1px 0 #444;transition:background .08s}
.skin-face-tab:active{background:#555}
.skin-face-tab.active{background:#3f8a2e;border-color:#2d6b1e;color:#fff;text-shadow:1px 1px 0 #2d6b1e;box-shadow:inset 1px 1px 0 #5ab840,inset -1px -1px 0 #2d6b1e}
.skin-grid-wrap{background:#111;border:2px solid #555;padding:2px;touch-action:none}
.skin-grid-canvas{display:block;image-rendering:pixelated;cursor:crosshair;height:auto}
.skin-palette{display:flex;flex-wrap:wrap;gap:3px;justify-content:center;max-width:300px}
.skin-palette-color{width:22px;height:22px;border:2px solid #555;cursor:pointer;box-shadow:inset 1px 1px 0 rgba(255,255,255,0.2),inset -1px -1px 0 rgba(0,0,0,0.3);transition:transform .1s}
.skin-palette-color:active{transform:scale(0.9)}
.skin-palette-color.active{border-color:#fff;box-shadow:0 0 0 2px #4ecca3}
.skin-tools{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.skin-tool{padding:6px 12px;border:2px solid #555;background:#6d6d6d;box-shadow:inset 1px 1px 0 #999,inset -1px -1px 0 #555;color:#ccc;font-size:12px;font-weight:bold;cursor:pointer;font-family:inherit;text-shadow:1px 1px 0 #444}
.skin-tool:active{background:#555}
.skin-tool.active{background:#3f8a2e;border-color:#2d6b1e;color:#fff;text-shadow:1px 1px 0 #2d6b1e}
.skin-upload-section{width:100%;max-width:320px;background:#333;border:2px solid #555;padding:12px;text-align:center}
.skin-upload-label{font-size:12px;color:#aaa;margin-bottom:8px}
.skin-upload-btn{display:inline-block;cursor:pointer}
.skin-upload-hint{font-size:10px;color:#666;margin-top:8px;line-height:1.4}

/* === 管理员面板 === */
.admin-overlay{position:fixed;inset:0;z-index:265;background:rgba(0,0,0,0.65);display:none;align-items:center;justify-content:center;pointer-events:auto}
.admin-overlay.show{display:flex}
.admin-panel{width:min(94vw,440px);background:#c6c6c6;border:3px solid #555;box-shadow:inset 3px 3px 0 #ddd,inset -3px -3px 0 #999,6px 6px 20px rgba(0,0,0,0.5);display:flex;flex-direction:column;max-height:88vh;image-rendering:pixelated}
.admin-panel-wide{width:min(96vw,640px)}
.admin-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:#8b8b8b;border-bottom:3px solid #555;box-shadow:inset 2px 2px 0 #aaa,inset -2px -2px 0 #666}
.admin-title{font-size:16px;font-weight:bold;color:#3f3f3f;text-shadow:1px 1px 0 #eee}
.admin-close{width:28px;height:28px;border:2px solid #555;background:#8b8b8b;box-shadow:inset 1px 1px 0 #aaa,inset -1px -1px 0 #666;color:#3f3f3f;font-size:16px;font-weight:bold;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;padding:0}
.admin-close:active{background:#6d6d6d}
.admin-body{padding:12px;overflow-y:auto;-webkit-overflow-scrolling:touch;flex:1}
.admin-loading,.admin-empty{text-align:center;color:#666;padding:40px 10px;font-size:14px}

/* 管理员侧边栏图标激活 */
.menu-side-icon.active{background:#3f8a2e;border-color:#2d6b1e;color:#fff;box-shadow:inset 1px 1px 0 #5ab840,inset -1px -1px 0 #2d6b1e}
.menu-side-icon.active svg path{fill:#fff}

/* 用户列表 */
.admin-user-list{display:flex;flex-direction:column;gap:6px}
.admin-user-row{display:flex;align-items:center;gap:10px;padding:10px 12px;background:#8b8b8b;border:2px solid #555;box-shadow:inset 2px 2px 0 #aaa,inset -2px -2px 0 #666}
.admin-user-avatar{width:36px;height:36px;border-radius:3px;background:linear-gradient(135deg,#5a8a3a,#3d6b24);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:bold;color:#fff;flex-shrink:0;border:2px solid #2d5016}
.admin-user-info{flex:1;min-width:0}
.admin-user-name{font-size:14px;font-weight:bold;color:#3f3f3f;text-shadow:1px 1px 0 #ddd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin-user-meta{display:flex;align-items:center;gap:8px;margin-top:3px}
.admin-status{font-size:11px;padding:2px 6px;border:1px solid #555;font-weight:bold}
.admin-status.online{background:#3f8a2e;border-color:#2d6b1e;color:#fff}
.admin-status.offline{background:#555;border-color:#444;color:#aaa}
.admin-world-badge{font-size:11px;color:#666;background:#aaa;padding:2px 6px;border:1px solid #888}
.admin-btn{padding:6px 12px;border:2px solid #555;background:#8b8b8b;box-shadow:inset 1px 1px 0 #aaa,inset -1px -1px 0 #666;color:#3f3f3f;font-size:12px;font-weight:bold;cursor:pointer;font-family:inherit;text-shadow:1px 1px 0 #ddd;transition:background .08s}
.admin-btn:active{background:#6d6d6d}
.admin-btn-inv{font-size:11px;padding:5px 10px}
.admin-btn-primary{background:#3f8a2e;border-color:#2d6b1e;color:#fff;text-shadow:1px 1px 0 #2d6b1e;box-shadow:inset 1px 1px 0 #5ab840,inset -1px -1px 0 #2d6b1e}
.admin-btn-primary:active{background:#2d6b1e}
.admin-btn-danger{color:#e94560;border-color:#e94560}
.admin-btn-danger:active{background:#e94560;color:#fff}
.admin-btn-sm{padding:4px 8px;font-size:11px}

/* 世界列表 */
.admin-world-list{display:flex;flex-direction:column;gap:8px}
.admin-world-row{display:flex;align-items:center;gap:10px;padding:12px;background:#8b8b8b;border:2px solid #555;box-shadow:inset 2px 2px 0 #aaa,inset -2px -2px 0 #666}
.admin-world-row.is-default{border-color:#3f8a2e;background:#7a9a6a}
.admin-world-icon{font-size:28px;flex-shrink:0}
.admin-world-info{flex:1;min-width:0}
.admin-world-name{font-size:14px;font-weight:bold;color:#3f3f3f;text-shadow:1px 1px 0 #ddd}
.admin-world-meta{display:flex;gap:8px;margin-top:4px;font-size:11px;color:#555;flex-wrap:wrap}
.admin-world-type{background:#aaa;padding:2px 6px;border:1px solid #888}
.admin-world-seed{color:#777}
.admin-default-badge{background:#3f8a2e;color:#fff;padding:2px 6px;border:1px solid #2d6b1e;font-weight:bold}
.admin-world-actions{display:flex;gap:4px;flex-shrink:0;flex-wrap:wrap}
.admin-add-world{margin-top:12px;text-align:center}

/* 背包查看 */
.admin-inv-body{display:flex;gap:14px}
.admin-inv-left{flex:1;min-width:0}
.admin-inv-right{flex:1;min-width:0;border-left:2px solid #555;padding-left:14px}
.admin-section-label{font-size:12px;color:#3f3f3f;font-weight:bold;margin-bottom:8px;text-shadow:1px 1px 0 #eee}
.admin-inv-grid{display:grid;grid-template-columns:repeat(9,1fr);gap:2px}
.admin-inv-slot{aspect-ratio:1;background:#8b8b8b;border:2px solid #555;box-shadow:inset 1px 1px 0 #aaa,inset -1px -1px 0 #666;display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer;min-width:28px;min-height:28px}
.admin-inv-slot:active{background:#6d6d6d}
.admin-inv-item{position:absolute;inset:2px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:2px}
.admin-inv-item img.admin-item-icon{width:20px;height:20px;border:none;background:transparent}
.admin-inv-item-name{font-size:7px;color:#fff;text-shadow:1px 1px 1px #000;text-align:center;line-height:1.1;overflow:hidden;max-width:100%}
.admin-inv-count{position:absolute;bottom:0;right:1px;font-size:8px;color:#fff;font-weight:bold;text-shadow:1px 1px 1px #000}
.admin-item-search{width:100%;box-sizing:border-box;padding:6px 8px;margin-bottom:8px;background:#8b8b8b;border:2px solid #555;box-shadow:inset 1px 1px 0 #aaa,inset -1px -1px 0 #666;font-size:12px;color:#3f3f3f;font-weight:bold;text-shadow:1px 1px 0 #ddd;outline:none}
.admin-item-search:focus{background:#999;border-color:#333}
.admin-item-search::placeholder{color:#5a5a5a;font-weight:normal;text-shadow:none}
.admin-item-list{display:flex;flex-direction:column;gap:3px;max-height:400px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.admin-item-entry{display:flex;align-items:center;gap:8px;padding:6px 8px;background:#8b8b8b;border:2px solid #555;box-shadow:inset 1px 1px 0 #aaa,inset -1px -1px 0 #666;cursor:pointer;transition:background .08s}
.admin-item-entry:active{background:#6d6d6d}
.admin-item-icon{width:24px;height:24px;flex-shrink:0;border:1px solid #444;image-rendering:pixelated}
img.admin-item-icon{border:1px solid #444;object-fit:contain;background:#5a5a5a}
.admin-item-name{font-size:12px;color:#3f3f3f;font-weight:bold;text-shadow:1px 1px 0 #ddd}

/* 管理员模态框 */
.admin-modal-overlay{position:fixed;inset:0;z-index:270;background:rgba(0,0,0,0.7);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(2px)}
.admin-modal{background:#c6c6c6;border:3px solid #555;box-shadow:inset 3px 3px 0 #ddd,inset -3px -3px 0 #999,6px 6px 20px rgba(0,0,0,0.5);width:min(88vw,360px);padding:16px;image-rendering:pixelated}
.admin-modal-title{font-size:16px;font-weight:bold;color:#3f3f3f;text-shadow:1px 1px 0 #eee;margin-bottom:14px;padding-bottom:8px;border-bottom:2px solid #555}
.admin-form-group{margin-bottom:12px}
.admin-form-group label{display:block;font-size:12px;font-weight:bold;color:#3f3f3f;margin-bottom:6px;text-shadow:1px 1px 0 #ddd}
.admin-input{width:100%;padding:8px 10px;border:2px solid #555;background:#8b8b8b;box-shadow:inset 1px 1px 0 #666,inset -1px -1px 0 #aaa;color:#3f3f3f;font-size:14px;font-family:inherit}
.admin-input:focus{border-color:#4ecca3;outline:none}
.admin-select{width:100%;padding:8px 10px;border:2px solid #555;background:#8b8b8b;box-shadow:inset 1px 1px 0 #666,inset -1px -1px 0 #aaa;color:#3f3f3f;font-size:14px;font-family:inherit;cursor:pointer}
.admin-modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:14px}

/* === 氧气条 === */
.air-bar{position:fixed;top:34px;left:50%;transform:translateX(-50%);width:120px;height:8px;background:rgba(0,0,0,0.5);border-radius:4px;overflow:hidden;border:1px solid rgba(100,200,255,0.4);z-index:16;pointer-events:none}
.air-fill{height:100%;width:100%;background:linear-gradient(90deg,#4ec0e4,#a0d8ef);border-radius:4px;transition:width .15s}
.air-fill.low{background:linear-gradient(90deg,#e94560,#ff6b6b);animation:airPulse 0.5s infinite alternate}
@keyframes airPulse{from{opacity:0.7}to{opacity:1}}

/* === 死亡界面 === */
.death-overlay{position:fixed;inset:0;z-index:300;background:rgba(80,0,0,0.7);display:none;align-items:center;justify-content:center;pointer-events:auto;backdrop-filter:blur(2px)}
.death-overlay.show{display:flex;animation:deathFadeIn 0.6s ease-out}
@keyframes deathFadeIn{from{opacity:0;background:rgba(80,0,0,0)}to{opacity:1;background:rgba(80,0,0,0.7)}}
.death-panel{text-align:center;animation:deathSlideUp 0.5s ease-out 0.3s both}
@keyframes deathSlideUp{from{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}
.death-title{font-size:42px;font-weight:bold;color:#e94560;text-shadow:0 0 20px rgba(233,69,96,0.8),2px 2px 0 #800a1e;letter-spacing:4px;margin-bottom:10px}
.death-cause{font-size:14px;color:#ccc;margin-bottom:30px;text-shadow:1px 1px 0 #000}
.death-buttons{display:flex;gap:16px;justify-content:center}
.death-btn{padding:14px 28px;border:2px solid #555;background:#8b8b8b;box-shadow:inset 2px 2px 0 #aaa,inset -2px -2px 0 #666;color:#3f3f3f;font-size:14px;font-weight:bold;cursor:pointer;font-family:inherit;text-shadow:1px 1px 0 #ddd;text-align:center;line-height:1.5;min-width:140px;transition:background .08s}
.death-btn:active{background:#6d6d6d}
.death-btn-primary{background:#3f8a2e;border-color:#2d6b1e;color:#fff;text-shadow:1px 1px 0 #2d6b1e;box-shadow:inset 2px 2px 0 #5ab840,inset -2px -2px 0 #2d6b1e}
.death-btn-primary:active{background:#2d6b1e}
.death-btn-disabled{opacity:0.4;cursor:not-allowed;color:#666;text-shadow:none;box-shadow:inset 2px 2px 0 #999,inset -2px -2px 0 #777}
.death-btn-hint{font-size:11px;font-weight:normal;opacity:0.8}

/* === 世界规则面板 === */
.gamerule-list{display:flex;flex-direction:column;gap:2px}
.gamerule-row{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:#9a9a9a;border:1px solid #777;box-shadow:inset 1px 1px 0 #bbb,inset -1px -1px 0 #888}
.gamerule-info{flex:1}
.gamerule-name{font-size:14px;font-weight:bold;color:#3f3f3f;text-shadow:1px 1px 0 #ddd}
.gamerule-desc{font-size:11px;color:#555;margin-top:2px;line-height:1.3}
.gamerule-toggle{width:52px;height:26px;border-radius:13px;background:#666;border:2px solid #555;position:relative;cursor:pointer;transition:background .15s;flex-shrink:0}
.gamerule-toggle.on{background:#3f8a2e}
.gamerule-toggle::after{content:'';position:absolute;width:18px;height:18px;border-radius:50%;background:#ddd;top:2px;left:2px;transition:left .15s}
.gamerule-toggle.on::after{left:28px;background:#fff}
.gamerule-world-header{font-size:16px;font-weight:bold;color:#3f3f3f;text-shadow:1px 1px 0 #ddd;text-align:center;padding:8px 0;margin-bottom:8px;border-bottom:2px solid #777}
.gamerule-section-label{font-size:13px;font-weight:bold;color:#3f3f3f;text-shadow:1px 1px 0 #ddd;padding:8px 4px 4px;margin-top:8px;border-bottom:1px solid #888}
.gamerule-view-settings{display:flex;flex-direction:column;gap:2px}
.gamerule-select{padding:6px 8px;border:2px solid #555;background:#bbb;color:#3f3f3f;font-size:13px;font-family:inherit;font-weight:bold;min-width:100px}
.gamerule-input{width:70px;padding:6px 8px;border:2px solid #555;background:#bbb;color:#3f3f3f;font-size:13px;font-family:inherit;font-weight:bold;text-align:center}
.gamerule-save-row{margin-top:10px;padding:0 4px}
.view-btn.disabled,.view-btn:disabled{opacity:.4;cursor:not-allowed;background:#555;border-color:#333;color:#888}

/* === 时间设置面板 === */
.time-world-selector{margin-bottom:12px}
.time-world-selector label{display:block;font-size:12px;font-weight:bold;color:#3f3f3f;margin-bottom:6px;text-shadow:1px 1px 0 #ddd}
.time-world-select{width:100%;padding:8px 10px;border:2px solid #555;background:#8b8b8b;box-shadow:inset 1px 1px 0 #666,inset -1px -1px 0 #aaa;color:#3f3f3f;font-size:14px;font-family:inherit;cursor:pointer}
.time-world-select:focus{border-color:#4ecca3;outline:none}
.time-current{display:flex;align-items:center;justify-content:center;gap:10px;padding:14px;background:#8b8b8b;border:2px solid #555;box-shadow:inset 2px 2px 0 #aaa,inset -2px -2px 0 #666;margin-bottom:12px}
.time-current-icon{font-size:32px}
.time-current-display{font-size:28px;font-weight:bold;color:#3f3f3f;text-shadow:1px 1px 0 #ddd;font-family:'Courier New',monospace}
.time-phase-badge{font-size:11px;padding:3px 8px;border:1px solid #555;font-weight:bold;margin-top:2px;display:inline-block}
.time-phase-badge.day{background:#4a9c2e;border-color:#2d6b1e;color:#fff}
.time-phase-badge.night{background:#2a3a7a;border-color:#1a2a5a;color:#ccd}
.time-slider-row{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.time-slider{flex:1;-webkit-appearance:none;height:8px;background:#666;border:1px solid #555;border-radius:4px;outline:none}
.time-slider::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#4ecca3;border:2px solid #2d6b1e;cursor:pointer}
.time-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#4ecca3;border:2px solid #2d6b1e;cursor:pointer}
.time-input{width:70px;padding:6px 8px;border:2px solid #555;background:#8b8b8b;box-shadow:inset 1px 1px 0 #666,inset -1px -1px 0 #aaa;color:#3f3f3f;font-size:14px;font-family:inherit;text-align:center}
.time-input:focus{border-color:#4ecca3;outline:none}
.time-presets{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:14px}
.time-preset{padding:8px 4px;border:2px solid #555;background:#8b8b8b;box-shadow:inset 1px 1px 0 #aaa,inset -1px -1px 0 #666;color:#3f3f3f;font-size:12px;font-weight:bold;cursor:pointer;text-align:center;transition:background .08s;font-family:inherit;text-shadow:1px 1px 0 #ddd}
.time-preset:active{background:#6d6d6d}
.time-preset-icon{font-size:18px;display:block;margin-bottom:2px}
.time-apply-row{text-align:center;margin-top:6px}

/* ==================== 出生点设置面板 ==================== */
.spawn-info-card{text-align:center;padding:14px;background:#8b8b8b;border:2px solid #555;box-shadow:inset 2px 2px 0 #aaa,inset -2px -2px 0 #666;margin-bottom:14px}
.spawn-world-name{font-size:18px;font-weight:bold;color:#3f3f3f;text-shadow:1px 1px 0 #ddd;margin-bottom:6px}
.spawn-badge{font-size:11px;padding:3px 10px;border:1px solid #555;font-weight:bold;display:inline-block}
.spawn-badge.custom{background:#4a9c2e;border-color:#2d6b1e;color:#fff}
.spawn-badge.auto{background:#7a7a7a;border-color:#555;color:#ddd}
.spawn-coords{background:#8b8b8b;border:2px solid #555;box-shadow:inset 2px 2px 0 #aaa,inset -2px -2px 0 #666;margin-bottom:14px}
.spawn-coord-row{display:flex;justify-content:space-between;padding:8px 14px;border-bottom:1px solid #777}
.spawn-coord-row:last-child{border-bottom:none}
.spawn-coord-label{font-size:13px;font-weight:bold;color:#555}
.spawn-coord-value{font-size:14px;color:#3f3f3f;font-family:'Courier New',monospace}
.spawn-actions{margin-bottom:14px}
.spawn-hint{font-size:12px;color:#888;text-align:center;padding:8px;line-height:1.5}