/* 移动优先样式（与 index.html 中 ID/类名一致） */
* { box-sizing: border-box; margin: 0; padding: 0; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
html,body { width:100%;height:100%;overflow:hidden;position:fixed;background:#87ceeb;font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; overscroll-behavior:none !important; touch-action:none; }

.btn { background:rgba(0,0,0,0.6); color:#fff; border:1px solid rgba(255,255,255,0.25); padding:10px 14px; border-radius:10px; cursor:pointer; font-weight:700; }
.hidden { display:none; }

/* crosshair & mining progress */
#crosshair { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); color:rgba(255,255,255,0.95); font-size:28px; font-weight:900; pointer-events:none; z-index:10; text-shadow:0 0 3px #000; }
#mining-progress-container { position:absolute; top: calc(50% + 44px); left:50%; transform:translateX(-50%); width:180px; height:10px; background:rgba(0,0,0,0.6); border-radius:8px; display:none; z-index:15; overflow:hidden; pointer-events:none; }
#mining-progress-bar { width:0%;height:100%;background:#38bdf8; transition:width .05s linear; }

/* stats overlay */
#stats-overlay { position:absolute; top:8px; left:8px; background:rgba(15,23,42,0.75); color:#38bdf8; font-family:monospace; font-size:12px; padding:8px 10px; border-radius:10px; z-index:40; border:1px solid rgba(255,255,255,0.1); pointer-events:none; }

/* modal / main menu */
.modal { position:absolute; inset:0; z-index:999; display:flex; flex-direction:column; justify-content:center; align-items:center; color:white; text-align:center; padding:18px; background:rgba(15,23,42,0.9); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.mc-title { font-size:34px; font-weight:900; letter-spacing:4px; color:#facc15; text-shadow:4px 4px 0 #000, -2px -2px 0 #854d0e; margin-bottom:6px; text-transform:uppercase; }
.menu-card-container { display:flex; gap:14px; max-width:720px; width:100%; justify-content:center; flex-wrap:wrap; padding:6px; }
.mode-card { flex:1; min-width:180px; background:rgba(30,41,59,0.98); border:3px solid rgba(255,255,255,0.12); border-radius:12px; padding:18px; display:flex; flex-direction:column; align-items:center; cursor:pointer; }

/* bottom UI */
#bottom-ui-group { position:absolute; bottom:10px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:10px; z-index:30; pointer-events:auto; width:100%; max-width:980px; padding:0 8px; }
#pause-btn { background:rgba(0,0,0,0.6); border:1px solid rgba(255,255,255,0.4); color:white; padding:8px 16px; border-radius:20px; font-weight:bold; cursor:pointer; }

/* status */
#status-container { display:flex; flex-direction:column; align-items:center; gap:6px; background:rgba(0,0,0,0.55); padding:8px 14px; border-radius:14px; border:1px solid rgba(255,255,255,0.12); }
#health-bar { display:flex; gap:6px; }
.heart-unit { font-size:16px; filter: drop-shadow(0 2px 2px rgba(0,0,0,0.8)); }
#hunger-bar-bg { width:140px; height:10px; background:rgba(255,255,255,0.12); border-radius:6px; overflow:hidden; border:1px solid rgba(0,0,0,0.4); }
#hunger-bar-fill { width:100%; height:100%; background:#d97706; transition:width .25s ease; }

/* inventory and crafting */
.inv-container { background:rgba(30,41,59,0.98); border:2px solid rgba(255,255,255,0.12); border-radius:12px; padding:14px; width:100%; max-width:980px; box-shadow:0 12px 30px rgba(0,0,0,0.6); max-height:90vh; overflow:hidden; display:flex; flex-direction:column; gap:12px; }
.crafting-recipes { display:flex; flex-direction:column; gap:8px; max-height:160px; overflow-y:auto !important; touch-action:pan-y !important; -webkit-overflow-scrolling:touch !important; overscroll-behavior:contain; }

/* inventory grid and hotbar */
.inv-hotbar-grid { display:grid; grid-template-columns:repeat(9,1fr); gap:8px; }
.inv-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(64px,1fr)); gap:10px; max-height:44vh; overflow-y:auto !important; padding:8px; touch-action:pan-y !important; -webkit-overflow-scrolling:touch !important; overscroll-behavior:contain; }
.inv-slot { background:rgba(255,255,255,0.06); border:2px solid rgba(255,255,255,0.12); border-radius:10px; min-height:64px; aspect-ratio:1; display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; cursor:pointer; }
.inv-slot-icon { width:32px;height:32px;border-radius:6px;margin-bottom:6px; pointer-events:none; }
.inv-slot-name { font-size:11px; pointer-events:none; text-align:center; line-height:1; }
.inv-slot-count { position:absolute; bottom:6px; right:8px; font-size:11px; font-weight:800; pointer-events:none; }

/* hotbar */
#hotbar { display:flex !important; flex-wrap:nowrap !important; overflow-x:auto !important; max-width:96vw !important; gap:8px; background:rgba(0,0,0,0.55); padding:8px; border-radius:12px; border:2px solid rgba(255,255,255,0.12); touch-action:pan-x !important; -webkit-overflow-scrolling:touch !important; overscroll-behavior:contain; z-index:30; }
.hotbar-slot { flex:0 0 76px !important; height:56px; border-radius:10px; background:rgba(255,255,255,0.06); display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; color:#fff; font-size:12px; cursor:pointer; border:2px solid transparent; padding:6px; }
.slot-icon { width:24px; height:24px; border-radius:4px; margin-bottom:6px; pointer-events:none; }
.slot-count { position:absolute; bottom:6px; right:8px; font-size:11px; font-weight:800; pointer-events:none; }

/* joystick left-bottom */
.touch-ui { position:absolute; inset:0; pointer-events:none; z-index:20; }
#joystick-zone { position:absolute; bottom:18px; left:12px; width:140px; height:140px; background:rgba(255,255,255,0.06); border:2px solid rgba(255,255,255,0.12); border-radius:50%; pointer-events:auto; touch-action:none; }
#joystick-knob { position:absolute; top:44px; left:44px; width:52px; height:52px; background:rgba(255,255,255,0.6); border-radius:50%; pointer-events:none; }
#touch-look-zone { position:absolute; top:0; right:0; width:58vw; height:100vh; pointer-events:auto; touch-action:none; }

/* action-buttons container (右下) */
#action-buttons {
  position:fixed;
  right:12px;
  bottom:12px;
  z-index:60;
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:center;
  pointer-events:auto;
  max-width:46vw;
}
.action-btn { width:56px; height:56px; border-radius:50%; background:rgba(0,0,0,0.55); border:2px solid rgba(255,255,255,0.6); color:white; font-size:14px; display:flex; justify-content:center; align-items:center; touch-action:none; cursor:pointer; }
.action-btn:active { transform:scale(.96); }

#mobile-jump-only { width:68px; height:68px; border-radius:50%; background:rgba(56,189,248,0.78); border:2px solid rgba(255,255,255,0.9); font-weight:800; }

/* fly up/down smaller */
#fly-up-btn, #fly-down-btn { width:42px; height:36px; border-radius:8px; font-weight:800; }

/* small screen tweaks */
@media (max-width:720px) {
  .mc-title { font-size:28px; }
  .mode-card { min-width:160px; padding:14px; }
  #hotbar { max-width:94vw; }
  #joystick-zone { width:120px; height:120px; }
  #joystick-knob { width:46px; height:46px; top:37px; left:37px; }
  .action-btn { width:52px; height:52px; }
  .inv-slot { min-height:56px; }
}