:root{
  --panel: rgba(15,22,30,0.55);
  --panel-border: rgba(255,255,255,0.14);
  --accent: #7fe6c8;
  --text: #eaf4ff;
}
*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html,body{ width:100%; height:100%; overflow:hidden; background:#0a0e14; }
body{ font-family:"PingFang SC","Microsoft YaHei","Segoe UI",system-ui,sans-serif; color:var(--text); -webkit-font-smoothing:antialiased; touch-action:none; }
canvas{ display:block; }
#ui{ position:fixed; inset:0; pointer-events:none; z-index:10; user-select:none; -webkit-user-select:none; }

/* 顶部信息 */
#hud{ position:absolute; top:max(12px,env(safe-area-inset-top)); left:12px; display:flex; gap:8px; flex-wrap:wrap; }
.chip{
  background:var(--panel); border:1px solid var(--panel-border);
  border-radius:11px; padding:6px 11px; font-size:13px; backdrop-filter:blur(8px);
  box-shadow:0 4px 18px rgba(0,0,0,.25); display:flex; align-items:center; gap:6px; font-variant-numeric:tabular-nums;
}
.chip b{ color:var(--accent); font-weight:700; }

/* 右上：小地图 + 按钮 */
#topright{ position:absolute; top:max(12px,env(safe-area-inset-top)); right:12px; display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
#minimapWrap{ padding:5px; background:var(--panel); border:1px solid var(--panel-border); border-radius:13px; backdrop-filter:blur(8px); box-shadow:0 4px 18px rgba(0,0,0,.25); }
#minimap{ display:block; border-radius:8px; }
#btns{ display:flex; gap:7px; flex-wrap:wrap; justify-content:flex-end; max-width:230px; pointer-events:auto; }
.btn{ background:var(--panel); border:1px solid var(--panel-border); border-radius:10px; padding:7px 11px; font-size:12.5px; backdrop-filter:blur(8px); cursor:pointer; transition:.15s; white-space:nowrap; }
.btn:hover{ background:rgba(40,60,80,.7); }
.btn.on{ border-color:var(--accent); color:var(--accent); box-shadow:0 0 12px rgba(127,230,200,.35); }

/* 准星 */
#cross{ position:absolute; top:50%; left:50%; width:22px; height:22px; transform:translate(-50%,-50%); opacity:0; transition:opacity .3s; }
#cross:before,#cross:after{ content:""; position:absolute; background:rgba(255,255,255,.8); box-shadow:0 0 3px rgba(0,0,0,.6); }
#cross:before{ left:50%; top:0; width:2px; height:100%; transform:translateX(-50%); }
#cross:after{ top:50%; left:0; height:2px; width:100%; transform:translateY(-50%); }

/* 物品栏 */
#hotbar{ position:absolute; bottom:max(14px,env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); display:flex; gap:5px; padding:6px; background:var(--panel); border:1px solid var(--panel-border); border-radius:14px; backdrop-filter:blur(8px); box-shadow:0 6px 22px rgba(0,0,0,.3); pointer-events:auto; max-width:96vw; flex-wrap:wrap; justify-content:center; }
.slot{ position:relative; width:44px; height:44px; border-radius:9px; border:2px solid rgba(255,255,255,.12); background:rgba(0,0,0,.25); cursor:pointer; overflow:hidden; display:flex; align-items:flex-end; justify-content:center; }
.slot .sw{ position:absolute; inset:0; }
.slot .num{ position:relative; font-size:10px; padding:0 3px; background:rgba(0,0,0,.45); border-radius:5px 0 0 0; line-height:1.4; opacity:.85; }
.slot.sel{ border-color:#fff; box-shadow:0 0 0 2px rgba(127,230,200,.6), 0 0 12px rgba(127,230,200,.5); transform:translateY(-4px); }
#selName{ position:absolute; bottom:calc(max(14px,env(safe-area-inset-bottom)) + 60px); left:50%; transform:translateX(-50%); font-size:13px; background:var(--panel); border:1px solid var(--panel-border); padding:4px 12px; border-radius:9px; backdrop-filter:blur(8px); opacity:0; transition:opacity .25s; pointer-events:none; }

/* 状态指示（镜像/天气/飞行） */
#modes{ position:absolute; bottom:max(14px,env(safe-area-inset-bottom)); left:12px; display:flex; flex-direction:column; gap:6px; }
.mtag{ background:var(--panel); border:1px solid var(--panel-border); border-radius:9px; padding:5px 9px; font-size:12px; backdrop-filter:blur(8px); opacity:.55; }
.mtag.on{ opacity:1; border-color:var(--accent); color:var(--accent); }

#toast{ position:absolute; top:22%; left:50%; transform:translate(-50%,-50%); font-size:24px; font-weight:700; text-shadow:0 2px 14px rgba(0,0,0,.6); opacity:0; transition:opacity .3s; text-align:center; letter-spacing:1px; }

/* 覆盖层 */
.overlay{ position:absolute; inset:0; z-index:20; display:flex; flex-direction:column; align-items:center; justify-content:center; background:radial-gradient(120% 120% at 50% 30%, rgba(10,16,24,.4), rgba(6,9,14,.85)); pointer-events:auto; transition:opacity .5s; }
.card{ text-align:center; max-width:580px; padding:26px; }
.card h1{ font-size:44px; letter-spacing:4px; margin-bottom:8px; text-shadow:0 4px 24px rgba(0,0,0,.5); background:linear-gradient(120deg,#bfffe9,#7fb4ff 55%,#c8a6ff); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.card .sub{ font-size:14px; opacity:.78; margin-bottom:22px; letter-spacing:1px; }
.grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 16px; margin:0 auto 24px; max-width:460px; font-size:13.5px; text-align:left; }
.grid div{ background:var(--panel); border:1px solid var(--panel-border); border-radius:9px; padding:8px 11px; display:flex; align-items:center; gap:9px; }
.grid kbd{ background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); border-radius:6px; padding:2px 7px; font-family:inherit; font-size:11.5px; min-width:26px; text-align:center; white-space:nowrap; }
.feat{ display:flex; flex-wrap:wrap; gap:7px; justify-content:center; margin:0 auto 22px; max-width:480px; }
.feat span{ font-size:12px; background:rgba(127,230,200,.1); border:1px solid rgba(127,230,200,.25); color:#a9f0db; padding:4px 10px; border-radius:20px; }
.start{ display:inline-block; font-size:18px; font-weight:700; padding:13px 36px; border-radius:13px; letter-spacing:2px; cursor:pointer; background:linear-gradient(120deg,#2fae8a,#7fe6c8); color:#04201a; box-shadow:0 8px 30px rgba(60,200,160,.45); animation:pulse 2.2s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-4px) } }
.progress{ margin-top:18px; width:280px; height:6px; background:rgba(255,255,255,.12); border-radius:4px; overflow:hidden; }
.progress i{ display:block; height:100%; width:0; background:linear-gradient(90deg,#2fae8a,#7fe6c8); transition:width .2s; }
.ptip{ margin-top:12px; font-size:12px; opacity:.55; }

#underwater{ position:absolute; inset:0; background:linear-gradient(rgba(28,96,168,.28),rgba(10,46,104,.5)); opacity:0; transition:opacity .25s; }
#damageFlash{ position:absolute; inset:0; background:radial-gradient(transparent 38%, rgba(190,24,24,.6)); opacity:0; transition:opacity .14s; }
#fade{ position:absolute; inset:0; background:#05070c; opacity:0; transition:opacity .45s; }
#mineWrap{ position:absolute; top:calc(50% + 22px); left:50%; transform:translateX(-50%); width:84px; height:7px; background:rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.25); border-radius:5px; overflow:hidden; opacity:0; transition:opacity .1s; }
#mineBar{ height:100%; width:0%; background:linear-gradient(90deg,#ffd24a,#7fe6c8); transition:width .05s linear; }
/* 合成面板 */
#craft, #chest{ position:absolute; inset:0; z-index:25; display:none; align-items:center; justify-content:center; background:rgba(6,9,14,.55); pointer-events:auto; }
.chestCols{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.chHd{ font-size:13px; opacity:.7; margin-bottom:6px; letter-spacing:1px; }
.chList{ min-height:120px; max-height:46vh; overflow:auto; }
.chList .crow{ padding:7px 10px; flex-direction:row; justify-content:space-between; align-items:center; }
.chList .crow b{ color:var(--text); font-size:13px; }
.craftBox{ position:relative; width:min(460px,92vw); max-height:80vh; overflow:auto; background:var(--panel); border:1px solid var(--panel-border); border-radius:16px; padding:18px 18px 14px; backdrop-filter:blur(12px); box-shadow:0 12px 40px rgba(0,0,0,.5); }
.craftBox h2{ font-size:19px; margin-bottom:12px; letter-spacing:1px; }
.craftClose{ position:absolute; top:12px; right:14px; cursor:pointer; font-size:16px; opacity:.7; padding:4px 8px; }
.craftClose:hover{ opacity:1; }
.crow{ display:flex; flex-direction:column; gap:2px; padding:9px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.1); margin-bottom:7px; cursor:pointer; transition:.12s; background:rgba(127,230,200,.07); }
.crow:hover{ background:rgba(127,230,200,.18); border-color:var(--accent); }
.crow.dim{ opacity:.4; cursor:default; background:rgba(255,255,255,.03); }
.crow.dim:hover{ background:rgba(255,255,255,.03); border-color:rgba(255,255,255,.1); }
.cr-out{ font-weight:700; font-size:14.5px; color:var(--accent); }
.cr-in{ font-size:12px; opacity:.82; }
.cr-in i{ opacity:.6; font-style:normal; }
#survHud{ position:absolute; top:max(58px,calc(env(safe-area-inset-top) + 46px)); left:50%; transform:translateX(-50%); display:none; flex-direction:column; align-items:center; gap:5px; }
body.survival #survHud{ display:flex; }
#survHud .row{ background:var(--panel); border:1px solid var(--panel-border); border-radius:11px; padding:3px 11px; font-size:14px; backdrop-filter:blur(8px); letter-spacing:2px; line-height:1.5; white-space:nowrap; }
#foodRow{ letter-spacing:1px !important; }
.slot .cnt{ position:absolute; right:2px; bottom:0; font-size:11px; font-weight:700; padding:0 2px; text-shadow:0 1px 2px rgba(0,0,0,.9); display:none; }
.slot.empty{ opacity:.34; }
body:not(.survival) .btn#bSurv.on, body.survival .btn#bSurv{ }
#tEat{ right:108px; bottom:240px; display:none; background:rgba(150,80,40,.5); }
body.survival #tEat{ display:flex; }
#vignette{ position:absolute; inset:0; box-shadow:inset 0 0 160px rgba(0,0,0,.4); }
#hotbar, #modes, #selName{ transition:opacity .4s; }
body:not(.playing) #hotbar, body:not(.playing) #modes, body:not(.playing) #selName{ opacity:0 !important; pointer-events:none !important; }
/* 暂停时遮罩可穿透，顶部按钮/物品栏可点击 */
#pause{ display:none; pointer-events:none !important; background:rgba(6,9,14,.34) !important; align-items:flex-start !important; }
#pause .card{ margin-top:13vh; pointer-events:none; }
#pause .card h1{ font-size:30px; }
.fade-out{ opacity:0 !important; pointer-events:none !important; }

/* 触屏控制 */
#touch{ position:absolute; inset:0; z-index:14; display:none; }
#touch.show{ display:block; }
#stick{ position:absolute; bottom:90px; left:30px; width:130px; height:130px; border-radius:50%; border:2px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); pointer-events:auto; }
#stick i{ position:absolute; top:50%; left:50%; width:52px; height:52px; margin:-26px; border-radius:50%; background:rgba(255,255,255,.22); border:1px solid rgba(255,255,255,.3); }
.tbtn{ position:absolute; pointer-events:auto; width:62px; height:62px; border-radius:50%; background:var(--panel); border:1px solid var(--panel-border); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; font-size:22px; }
.tbtn.sm{ width:50px; height:50px; font-size:17px; }
#tJump{ right:30px; bottom:150px; }
#tBreak{ right:108px; bottom:96px; background:rgba(120,40,40,.5); }
#tPlace{ right:30px; bottom:76px; background:rgba(40,90,60,.5); }
#tUp{ right:108px; bottom:170px; }
#tDown{ right:30px; bottom:230px; }