*{margin:0;padding:0;box-sizing:border-box;}
html,body{width:100%;height:100%;overflow:hidden;background:#0a0a14;font-family:"Microsoft YaHei","PingFang SC","Segoe UI",sans-serif;color:#d0d0d0;user-select:none;-webkit-user-select:none;touch-action:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;}

/* ============================================================
   主页面（深色青蓝半透明）
   ============================================================ */
#main-menu{display:none;position:fixed;top:0;left:0;width:100%;height:100%;z-index:200;background:linear-gradient(160deg,rgba(15,40,50,0.95),rgba(10,30,40,0.97));flex-direction:column;align-items:center;justify-content:center;}
#mm-profile{position:absolute;top:20px;left:20px;display:flex;align-items:center;gap:10px;padding:8px 14px;background:rgba(20,60,80,0.45);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(0,188,212,0.15);border-radius:14px;cursor:pointer;transition:all 0.2s;}
#mm-profile:hover{background:rgba(30,80,100,0.55);border-color:rgba(0,188,212,0.3);}
#mm-avatar{width:50px;height:50px;border-radius:12px;border:2px solid rgba(0,188,212,0.2);overflow:hidden;display:flex;align-items:center;justify-content:center;background:rgba(10,30,40,0.6);}
#mm-nickname{font-size:14px;color:#c0e8f0;}
#mm-content{text-align:center;max-width:480px;width:90%;}
#mm-content h1{font-size:38px;color:#4DD0E1;margin-bottom:4px;text-shadow:0 0 20px rgba(0,188,212,0.25);}
#mm-content .subtitle{font-size:14px;color:#7ab8c8;margin-bottom:28px;}
#save-list{max-height:200px;overflow-y:auto;margin-bottom:20px;}
#mm-buttons{display:flex;gap:12px;justify-content:center;}
.main-btn{padding:14px 36px;border-radius:12px;font-size:15px;cursor:pointer;font-family:inherit;transition:all 0.2s;border:none;}
.main-btn.primary{background:linear-gradient(135deg,#007080,#0097A7);color:#e0f0f4;}
.main-btn.primary:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,188,212,0.4);}

/* ============================================================
   游戏视图
   ============================================================ */
#game-view{display:block;}
#gameCanvas{display:block;position:fixed;top:0;left:0;z-index:1;image-rendering:pixelated;image-rendering:crisp-edges;cursor:default;}
#ui-overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:10;pointer-events:none;}
#ui-overlay>*{pointer-events:auto;}

#dialog-mask{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.35);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);z-index:50;pointer-events:auto;}

/* 通用弹窗：深青蓝半透明 */
.glass-dialog{background:rgba(20,60,80,0.85);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(0,188,212,0.18);border-radius:18px;}
@keyframes slideIn{from{transform:translateX(-100%);}to{transform:translateX(0);}}
@keyframes fadeOut{0%{opacity:1;}70%{opacity:1;}100%{opacity:0;}}

/* HUD - 面板0.3透明，格子0.55 */
#hud-panel{position:absolute;top:14px;left:14px;background:rgba(20,60,80,0.3);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgba(0,188,212,0.1);border-radius:14px;padding:11px 15px;display:flex;align-items:center;gap:12px;}
#hud-avatar{width:40px;height:40px;border-radius:10px;border:1px solid rgba(0,188,212,0.15);flex-shrink:0;overflow:hidden;display:flex;align-items:center;justify-content:center;background:rgba(40,80,100,0.4);}
#hud-info{display:flex;flex-direction:column;gap:4px;}
#hud-nickname{font-size:12px;color:#c0e8f0;}
#hud-mana-bar{height:7px;background:rgba(255,255,255,0.1);border-radius:4px;overflow:hidden;position:relative;width:110px;}
#hud-mana-fill{height:100%;background:linear-gradient(90deg,#007080,#4DD0E1);border-radius:4px;transition:width 0.3s;}
#hud-mana-text{font-size:12px;color:#000;font-weight:bold;position:absolute;right:4px;top:50%;transform:translateY(-50%);}
/* 旧HUD时间已被canvas替代 */
#hud-time{display:none;}

/* 生存状态栏（饥饿/生命值 —— 单个容器包裹） */
#hud-survival{position:absolute;display:none;flex-direction:column;gap:3px;pointer-events:none;z-index:15;
  background:rgba(20,60,80,0.3);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(0,188,212,0.1);border-radius:8px;padding:5px 10px;}
#hud-hunger-bar{height:7px;background:rgba(255,255,255,0.1);border-radius:4px;overflow:hidden;position:relative;}
#hud-hunger-fill{height:100%;background:linear-gradient(90deg,#B8860B,#FFD700);border-radius:4px;transition:width 0.3s;}
#hud-hunger-text{font-size:10px;color:#000;font-weight:bold;position:absolute;right:4px;top:50%;transform:translateY(-50%);}
#hud-health-bar{height:7px;background:rgba(255,255,255,0.1);border-radius:4px;overflow:hidden;position:relative;}
#hud-health-fill{height:100%;background:linear-gradient(90deg,#B71C1C,#F44336);border-radius:4px;transition:width 0.3s;}
#hud-health-text{font-size:10px;color:#FFF;font-weight:bold;position:absolute;right:4px;top:50%;transform:translateY(-50%);}

/* 信息框（左侧中央，透明容器，消息自带半透明包裹） */
#info-box{position:fixed;left:14px;top:45%;transform:translateY(-50%);max-width:320px;z-index:25;
  color:#FBBF24;font-size:13px;font-family:"Microsoft YaHei","PingFang SC",sans-serif;
  pointer-events:none;line-height:1.6;display:flex;flex-direction:column;}
#info-box .info-msg{word-break:break-word;}

/* 指令输入栏（底部左下角） */
#cmd-container{position:fixed !important;left:14px !important;bottom:16px !important;z-index:80 !important;}

/* 自动补全弹出框（在cmd-container内部） */
#cmd-autocomplete > div:first-child{border-radius:8px 8px 0 0;}
#cmd-autocomplete > div:last-child{border-radius:0 0 8px 8px;}
#cmd-autocomplete > div:only-child{border-radius:8px;}
#cmd-autocomplete > div:hover{background:rgba(0,188,212,0.2) !important;color:#4DD0E1 !important;}

/* 死亡遮罩 */
#death-overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:300;
  background:rgba(160,10,10,0);display:flex;align-items:center;justify-content:center;
  transition:background 0.8s ease;pointer-events:none;}
#death-overlay.active{background:rgba(160,10,10,0.55);pointer-events:auto;}
#death-overlay .death-content{text-align:center;opacity:0;transform:scale(0.7);
  transition:all 0.6s cubic-bezier(0.34,1.56,0.64,1);}
#death-overlay.active .death-content{opacity:1;transform:scale(1);}
#death-overlay .death-title{font-size:48px;color:#FF4444;font-weight:bold;
  text-shadow:0 0 30px rgba(255,0,0,0.6),0 4px 8px rgba(0,0,0,0.8);
  margin-bottom:28px;font-family:"Microsoft YaHei",sans-serif;}
#death-overlay .death-respawn-btn{padding:14px 48px;font-size:18px;
  background:linear-gradient(135deg,#8B0000,#B71C1C);border:2px solid rgba(255,80,80,0.4);
  border-radius:12px;color:#FFCCCC;cursor:pointer;
  font-family:"Microsoft YaHei",sans-serif;transition:all 0.2s;}
#death-overlay .death-respawn-btn:hover{background:linear-gradient(135deg,#A00000,#D32F2F);
  box-shadow:0 0 24px rgba(255,0,0,0.5);transform:scale(1.05);}

/* 信息框滚动条 */
#info-box::-webkit-scrollbar{width:4px;}
#info-box::-webkit-scrollbar-track{background:transparent;}
#info-box::-webkit-scrollbar-thumb{background:rgba(0,188,212,0.25);border-radius:2px;}

/* 历史按钮 */
#history-btn:hover{background:rgba(30,80,100,0.7) !important;color:#4DD0E1 !important;}

/* 移动端适配 */
@media(max-width:600px){
  #cmd-container{left:8px !important;bottom:8px !important;}
  #cmd-container textarea{width:200px !important;}
  #info-box{left:8px;max-width:240px;font-size:11px;}
}

/* 设置菜单 */
#settings-btn{position:absolute;top:14px;right:14px;width:42px;height:42px;border-radius:50%;background:rgba(20,60,80,0.35);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgba(0,188,212,0.1);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.3s;z-index:20;}
#settings-btn:hover{background:rgba(30,80,100,0.5);}
#settings-btn svg{width:22px;height:22px;fill:#4DD0E1;}
#settings-menu{position:absolute;top:14px;right:66px;display:flex;flex-direction:row;gap:8px;background:rgba(20,60,80,0.35);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(0,188,212,0.1);border-radius:28px;padding:7px 10px;transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1);}
#settings-menu.hidden{opacity:0;transform:translateX(20px) scaleX(0.7);pointer-events:none;}
#settings-menu .s-btn{width:38px;height:38px;border-radius:50%;background:rgba(0,188,212,0.08);border:1px solid rgba(0,188,212,0.12);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.2s;position:relative;}
#settings-menu .s-btn:hover{background:rgba(0,188,212,0.2);border-color:rgba(0,188,212,0.35);transform:scale(1.12);}
#settings-menu .s-btn svg{width:17px;height:17px;fill:#4DD0E1;}
#settings-menu .s-btn .btn-tooltip{position:absolute;bottom:-18px;left:50%;transform:translateX(-50%);font-size:9px;color:#8ac8d8;white-space:nowrap;opacity:0;transition:opacity 0.2s;pointer-events:none;}
#settings-menu .s-btn:hover .btn-tooltip{opacity:1;}

/* 物品栏 - 面板0.3透明，格子0.55灰色 */
#hotbar-item-name{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);font-size:12px;color:#4DD0E1;text-shadow:0 0 8px rgba(0,188,212,0.3);pointer-events:none;text-align:center;}
#hotbar{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:5px;background:rgba(20,60,80,0.3);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgba(0,188,212,0.1);border-radius:12px;padding:6px;z-index:70;}
.hotbar-slot{width:48px;height:48px;background:rgba(180,185,195,0.55);border:1px solid rgba(200,205,215,0.4);border-radius:7px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.2s;position:relative;}
.hotbar-slot.active{border-color:#00BCD4;box-shadow:0 0 10px rgba(0,188,212,0.3);background:rgba(0,188,212,0.15);}
.hotbar-slot.sel-gold{border-color:#FFD700;box-shadow:0 0 10px rgba(255,215,0,0.5);}
.hotbar-slot.drag-hover{border-color:#4DD0E1;box-shadow:0 0 10px rgba(77,208,225,0.5);}
.hotbar-slot .item-count{position:absolute;bottom:1px;right:3px;font-size:12px;color:#fff;font-weight:bold;}
#hotbar-backpack-btn{width:48px;height:48px;background:rgba(0,188,212,0.12);border:1px solid rgba(0,188,212,0.2);border-radius:7px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.2s;}
#hotbar-backpack-btn:hover{background:rgba(0,188,212,0.22);}
#hotbar-backpack-btn svg{width:22px;height:22px;fill:#4DD0E1;}

/* 背包面板 - 面板0.3，格子0.55 */
#backpack-panel{position:fixed;left:14px;top:68px;width:auto;max-width:800px;min-width:750px;background:rgba(20,60,80,0.3);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(0,188,212,0.1);border-radius:0 14px 14px 14px;display:flex;flex-direction:column;z-index:55;transition:transform 0.35s ease;animation:slideIn 0.35s ease;}
#backpack-panel.hidden{transform:translateX(calc(-100% - 30px));visibility:hidden;animation:none;}
#backpack-header{padding:14px;border-bottom:1px solid rgba(0,188,212,0.1);display:flex;justify-content:space-between;align-items:center;}
#backpack-header h3{font-size:14px;color:#4DD0E1;}
#backpack-close{width:26px;height:26px;border-radius:50%;border:1px solid rgba(0,188,212,0.15);background:transparent;color:#8ac8d8;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
#backpack-grid{padding:10px;display:grid;grid-template-columns:repeat(14,48px);gap:3px;overflow-y:auto;align-content:start;}
.bp-slot{width:48px;height:48px;background:rgba(180,185,195,0.55);border:1px solid rgba(200,205,215,0.4);border-radius:4px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.15s;position:relative;}
.bp-slot:hover{background:rgba(200,210,220,0.65);border-color:rgba(0,188,212,0.3);}
.bp-slot.drag-hover{border-color:#4DD0E1;box-shadow:0 0 8px rgba(77,208,225,0.4);}
.bp-slot .item-count{position:absolute;bottom:1px;right:3px;font-size:12px;color:#fff;font-weight:bold;}


/* 箱子面板 */
#box-panel{animation:slideIn 0.3s ease;}

/* 摇杆 */
#joystick-area{position:fixed;bottom:16px;left:16px;width:100px;height:100px;border-radius:50%;background:rgba(20,60,80,0.25);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border:1px solid rgba(0,188,212,0.1);display:flex;align-items:center;justify-content:center;z-index:70;}
#joystick-knob{width:38px;height:38px;border-radius:50%;background:rgba(0,188,212,0.45);border:1px solid rgba(77,208,225,0.3);transition:transform 0.05s;}

/* 引导 */
#tutorial-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.55);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);display:none;z-index:100;align-items:center;justify-content:center;}
#tutorial-modal{background:rgba(20,60,80,0.85);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(0,188,212,0.15);border-radius:20px;padding:36px 32px;width:92%;max-width:480px;text-align:center;box-shadow:0 0 50px rgba(0,188,212,0.1);}
#tutorial-modal h2{font-size:20px;color:#4DD0E1;margin-bottom:10px;}
#tutorial-modal p{font-size:13px;color:#b0d8e0;margin-bottom:22px;line-height:1.6;}
#avatar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:16px;justify-items:center;}
.avatar-opt{width:68px;height:68px;border-radius:12px;border:2px solid rgba(0,188,212,0.15);cursor:pointer;transition:all 0.2s;overflow:hidden;background:rgba(10,30,45,0.5);}
.avatar-opt:hover{border-color:rgba(0,188,212,0.5);transform:scale(1.08);}
.avatar-opt.selected{border-color:#4DD0E1;box-shadow:0 0 16px rgba(0,188,212,0.4);}
.avatar-opt canvas{width:100%;height:100%;image-rendering:pixelated;}
.step-label{font-size:13px;color:#b0d8e0;margin-bottom:10px;}
.form-label{font-size:12px;color:#8ac8d8;}
#tutorial-modal input[type="text"]{width:100%;padding:12px 16px;background:rgba(0,188,212,0.06);border:1px solid rgba(0,188,212,0.15);border-radius:10px;color:#d0f0f8;font-size:15px;outline:none;margin-bottom:10px;text-align:center;}
#tutorial-modal input:focus{border-color:rgba(0,188,212,0.5);}
#tutorial-modal input[type="number"]{width:68px;padding:9px;background:rgba(0,188,212,0.06);border:1px solid rgba(0,188,212,0.15);border-radius:8px;color:#d0f0f8;font-size:13px;text-align:center;font-family:inherit;}
#tutorial-modal input[type="radio"]{accent-color:#00BCD4;transform:scale(1.15);margin-right:4px;}
.terrain-options{display:flex;gap:8px;justify-content:center;margin-bottom:10px;flex-wrap:wrap;}
.terrain-options label{padding:9px 15px;background:rgba(0,188,212,0.06);border:1px solid rgba(0,188,212,0.12);border-radius:10px;font-size:12px;color:#b0d8e0;cursor:pointer;transition:all 0.2s;}
.terrain-options label:hover{background:rgba(0,188,212,0.15);border-color:rgba(0,188,212,0.3);}

.tutorial-btn{padding:11px 34px;background:linear-gradient(135deg,#007080,#0097A7);border:none;border-radius:10px;color:#e0f0f4;font-size:14px;cursor:pointer;font-family:inherit;transition:all 0.2s;}
.tutorial-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,188,212,0.4);}
.tutorial-btn-primary{padding:10px 30px;background:linear-gradient(135deg,#007080,#0097A7);border:none;border-radius:10px;color:#e0f0f4;font-size:14px;cursor:pointer;font-family:inherit;transition:all 0.2s;display:inline-block;margin-top:6px;}
.tutorial-btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,188,212,0.4);}
.tutorial-btn-primary:disabled{opacity:0.35;cursor:not-allowed;transform:none;box-shadow:none;}

#upload-avatar-btn{padding:8px 20px;background:rgba(0,188,212,0.1);border:1px dashed rgba(0,188,212,0.25);border-radius:10px;color:#4DD0E1;font-size:11px;cursor:pointer;transition:all 0.2s;display:inline-block;margin-bottom:10px;}
.ctrl-hints{margin-top:12px;font-size:11px;color:#6aa8b8;line-height:1.6;}

::-webkit-scrollbar{width:5px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(0,188,212,0.2);border-radius:3px;}

/* 合成面板滚动条：标准宽度 + 暗色毛玻璃适配，鼠标可拖拽 */
#crafting-panel ::-webkit-scrollbar{width:10px;}
#crafting-panel ::-webkit-scrollbar-track{background:rgba(255,255,255,0.02);}
#crafting-panel ::-webkit-scrollbar-thumb{background:rgba(0,188,212,0.22);border-radius:5px;border:2px solid transparent;background-clip:content-box;}
#crafting-panel ::-webkit-scrollbar-thumb:hover{background:rgba(0,188,212,0.45);border:2px solid transparent;background-clip:content-box;}

/* 便携合成面板（背包下方，生存模式） */
#portable-craft-panel ::-webkit-scrollbar{width:10px;}
#portable-craft-panel ::-webkit-scrollbar-track{background:rgba(255,255,255,0.02);}
#portable-craft-panel ::-webkit-scrollbar-thumb{background:rgba(0,188,212,0.22);border-radius:5px;border:2px solid transparent;background-clip:content-box;}
#portable-craft-panel ::-webkit-scrollbar-thumb:hover{background:rgba(0,188,212,0.45);border:2px solid transparent;background-clip:content-box;}

/* 移动端 */
@media(max-width:600px){
  #mm-content h1{font-size:26px;}
  #hud-panel{padding:7px 10px;gap:8px;}
  #hud-avatar{width:30px;height:30px;}
  #hud-nickname{font-size:10px;}
  #hud-mana-bar{width:70px;height:5px;}
  #hud-time{font-size:10px;padding:4px 8px;}
  #settings-btn{width:36px;height:36px;}
  #settings-menu .s-btn{width:32px;height:32px;}
  .hotbar-slot{width:36px;height:36px;}
  #hotbar-backpack-btn{width:36px;height:36px;}
  #backpack-panel{width:90%;min-width:auto;}
  #backpack-grid{grid-template-columns:repeat(7,48px);}
  #joystick-area{width:80px;height:80px;}
  #tutorial-modal{padding:22px 16px;}
  .avatar-opt{width:54px;height:54px;}
}