* { margin:0; padding:0; box-sizing:border-box; user-select:none; -webkit-user-select:none; }
html,body { width:100%; height:100%; overflow:hidden; background:#000; }
body { font-family:"Segoe UI","Microsoft YaHei",sans-serif; }
#game { position:fixed; inset:0; width:100%; height:100%; display:block; }
.hidden { display:none !important; }
.screen { position:fixed; inset:0; z-index:50; display:flex; flex-direction:column; align-items:center; justify-content:center; }

/* ============ 主菜单 ============ */
#title-screen { z-index:100; }
#title-bg { position:absolute; inset:0; background-repeat:repeat; background-size:96px 96px; image-rendering:pixelated; filter:brightness(.42); }
#title-content { position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; }
#game-title { font-size:76px; letter-spacing:6px; color:#fff; font-weight:900;
  text-shadow:0 6px 0 #3a3a3a, 0 0 24px rgba(0,0,0,.6); -webkit-text-stroke:2px #2c2c2c; }
#game-subtitle { color:#ffd94a; font-size:20px; margin-top:2px; letter-spacing:14px; text-shadow:2px 2px 0 #3f3200; margin-bottom:40px; }
#splash { position:relative; color:#ff0; font-weight:700; font-size:20px; transform:rotate(-12deg) translate(310px,-64px);
  text-shadow:2px 2px 0 #4a4a00; animation:splash 0.5s ease-in-out infinite alternate; height:0; }
@keyframes splash { from{transform:rotate(-12deg) translate(310px,-64px) scale(1);} to{transform:rotate(-12deg) translate(310px,-64px) scale(1.09);} }
.mc-btn { display:block; width:320px; padding:13px 0; margin:8px 0; text-align:center; font-size:19px; color:#fff;
  font-weight:600; cursor:pointer; border:2px solid #000; background:linear-gradient(#8d8d8d,#6e6e6e 45%,#5c5c5c);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.45), inset 0 -3px 0 rgba(0,0,0,.35); text-shadow:2px 2px 0 #2f2f2f; }
.mc-btn:hover { background:linear-gradient(#9aa4ff88,#6e7baa 45%,#5a648f); border-color:#fff; }
.mc-btn.small { width:220px; font-size:15px; padding:9px 0; }
#title-hint { color:#ddd; font-size:13px; margin-top:34px; text-shadow:1px 1px 0 #000; letter-spacing:1px; }

/* ============ 暂停/死亡 ============ */
#pause-screen,#death-screen { background:rgba(10,10,14,.72); z-index:90; }
#pause-screen h2,#death-screen h2 { color:#fff; font-size:34px; margin-bottom:26px; text-shadow:2px 2px 0 #222; }
#death-screen h2 { color:#ff5545; }
#death-cause { color:#ddd; margin-bottom:24px; }
.controls-help { color:#bbb; font-size:13px; line-height:1.9; text-align:center; margin:18px 0 6px; }

/* ============ HUD ============ */
#hud { position:fixed; inset:0; z-index:10; pointer-events:none; }
#crosshair { position:absolute; left:50%; top:50%; width:22px; height:22px; transform:translate(-50%,-50%);
  mix-blend-mode:difference; }
#crosshair::before,#crosshair::after { content:""; position:absolute; background:#ddd; }
#crosshair::before { left:50%; top:0; width:2px; height:100%; transform:translateX(-50%); }
#crosshair::after { top:50%; left:0; height:2px; width:100%; transform:translateY(-50%); }
#vignette { position:absolute; inset:0; box-shadow:inset 0 0 140px rgba(0,0,0,.35); }
#damage-flash { position:absolute; inset:0; background:rgba(255,0,0,.35); opacity:0; transition:opacity .35s; }
#water-overlay { position:absolute; inset:0; background:rgba(25,70,180,.28); opacity:0; }
#status-bars { position:absolute; left:50%; bottom:66px; transform:translateX(-50%); width:378px; }
#hearts { display:flex; gap:1px; position:absolute; bottom:0; left:0; }
#hunger { display:flex; gap:1px; position:absolute; bottom:0; right:0; flex-direction:row-reverse; }
#bubbles { display:flex; gap:1px; position:absolute; bottom:22px; right:0; flex-direction:row-reverse; }
#status-bars img { width:20px; height:20px; image-rendering:pixelated; }

#hotbar { position:absolute; left:50%; bottom:10px; transform:translateX(-50%); display:flex;
  background:rgba(0,0,0,.35); border:2px solid rgba(0,0,0,.55); }
.slot { width:40px; height:40px; position:relative; background:rgba(139,139,139,.28);
  box-shadow:inset 1px 1px 0 rgba(0,0,0,.4), inset -1px -1px 0 rgba(255,255,255,.18); }
.slot img { width:32px; height:32px; position:absolute; left:4px; top:4px; image-rendering:pixelated; pointer-events:none; }
.slot .cnt { position:absolute; right:2px; bottom:0; color:#fff; font-size:13px; font-weight:700;
  text-shadow:1px 1px 0 #3f3f3f; pointer-events:none; }
.slot .dur { position:absolute; left:3px; bottom:3px; height:2px; background:#0f0; pointer-events:none; }
#hotbar .slot.sel { box-shadow:inset 0 0 0 3px #fff, inset 0 0 0 4px rgba(0,0,0,.5); z-index:1; }
#item-name-popup { position:absolute; left:50%; bottom:60px; transform:translateX(-50%); color:#fff;
  font-size:16px; font-weight:600; text-shadow:1px 1px 0 #000; opacity:0; transition:opacity .4s; }
#debug { position:absolute; left:8px; top:8px; color:#fff; font-size:13px; line-height:1.5;
  font-family:Consolas,monospace; text-shadow:1px 1px 0 #000; white-space:pre; }
#toast { position:absolute; left:50%; top:24%; transform:translateX(-50%); color:#ffe; background:rgba(0,0,0,.55);
  padding:7px 16px; font-size:15px; border:1px solid rgba(255,255,255,.25); opacity:0; transition:opacity .4s; white-space:nowrap; }

/* ============ 物品栏 ============ */
#inv-screen { z-index:80; background:rgba(0,0,0,.55); cursor:default; }
#inv-panel { background:#c6c6c6; border:3px solid; border-color:#fff #555 #555 #fff; padding:14px 16px; box-shadow:0 8px 30px rgba(0,0,0,.5); }
.inv-title { color:#3f3f3f; font-size:16px; font-weight:700; margin-bottom:8px; }
.inv-title.small { margin-bottom:4px; }
#inv-body { display:flex; gap:18px; }
#inv-grid { display:grid; grid-template-columns:repeat(9,40px); gap:0; }
#inv-hotbar { display:grid; grid-template-columns:repeat(9,40px); margin-top:10px; }
#inv-grid .slot,#inv-hotbar .slot { background:#8b8b8b; box-shadow:inset 1.5px 1.5px 0 #373737, inset -1.5px -1.5px 0 #fff; cursor:pointer; }
#inv-grid .slot:hover,#inv-hotbar .slot:hover,#recipe-row:hover .recipe-slot { background:#a5a5a5; }
#recipe-list { width:210px; max-height:330px; overflow-y:auto; background:#a0a0a0;
  box-shadow:inset 1.5px 1.5px 0 #373737, inset -1.5px -1.5px 0 #fff; padding:5px; }
#recipe-row { display:flex; align-items:center; gap:6px; padding:4px 5px; margin-bottom:3px; background:#bdbdbd;
  box-shadow:inset 1px 1px 0 #37373722, inset -1px -1px 0 #ffffff55; cursor:pointer; }
#recipe-row:hover { background:#cfd8cf; }
#recipe-row.disabled { opacity:.42; cursor:not-allowed; }
.recipe-slot { width:32px; height:32px; background:#8b8b8b; position:relative; flex:0 0 auto;
  box-shadow:inset 1px 1px 0 #373737, inset -1px -1px 0 #fff; }
.recipe-slot img { width:26px; height:26px; position:absolute; left:3px; top:3px; image-rendering:pixelated; }
.recipe-slot .cnt { position:absolute; right:1px; bottom:-1px; color:#fff; font-size:11px; font-weight:700; text-shadow:1px 1px 0 #333; }
.recipe-slot.lack::after { content:""; position:absolute; inset:0; background:rgba(255,60,60,.32); }
#recipe-row .arrow { color:#3f3f3f; font-weight:900; font-size:15px; margin:0 1px; }
#recipe-row .rname { font-size:12px; color:#333; width:52px; line-height:1.2; }
#cursor-item { position:fixed; width:32px; height:32px; z-index:99; pointer-events:none; }
#cursor-item img { width:32px; height:32px; image-rendering:pixelated; }
#cursor-item .cnt { position:absolute; right:-2px; bottom:-4px; color:#fff; font-size:13px; font-weight:700; text-shadow:1px 1px 0 #333; }