*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;overflow:hidden;background:#05070f;font-family:"Segoe UI",system-ui,"PingFang SC","Microsoft YaHei",sans-serif;color:#e8e6df;user-select:none;-webkit-user-select:none;touch-action:none}
#app{position:fixed;inset:0}
canvas#game{position:absolute;inset:0;width:100%;height:100%;display:block;image-rendering:pixelated;image-rendering:crisp-edges}
.hidden{display:none!important}

/* ---------- HUD ---------- */
#hud{position:absolute;inset:0;pointer-events:none;font-size:13px}
#statBars{position:absolute;left:10px;top:8px;display:flex;flex-direction:column;gap:4px}
.bar{position:relative;width:180px;height:16px;background:#171a26;border:2px solid #2c3346;border-radius:3px;overflow:hidden;box-shadow:0 2px 0 #00000066}
.bar .fill{height:100%;width:100%;transition:width .12s linear}
.bar.hp .fill{background:linear-gradient(#ff6b6b,#c0272d)}
.bar.mp .fill{background:linear-gradient(#7ab8ff,#2a5fd0)}
.bar span{position:absolute;inset:0;text-align:center;line-height:14px;font-size:11px;text-shadow:0 1px 2px #000;letter-spacing:.5px}
#clock{position:absolute;right:10px;top:8px;text-align:right;text-shadow:0 1px 3px #000}
#clock span{display:block}
#dayText{font-size:11px;opacity:.75}
#coins{position:absolute;right:10px;top:48px;display:flex;align-items:center;gap:5px;text-shadow:0 1px 3px #000}
.coinIcon{width:11px;height:11px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe89a,#d19b25);display:inline-block;box-shadow:0 0 4px #ffcc5588}
#bossBarWrap{position:absolute;left:50%;transform:translateX(-50%);bottom:96px;width:min(420px,72vw);text-align:center}
#bossName{font-size:13px;letter-spacing:2px;text-shadow:0 2px 4px #000;margin-bottom:3px;color:#ffd9d9}
.bar.boss{width:100%;height:13px}
.bar.boss .fill{background:linear-gradient(#ff9d5c,#a3231f)}
#toast{position:absolute;left:50%;top:20%;transform:translateX(-50%);display:flex;flex-direction:column;gap:4px;align-items:center}
.toastMsg{background:#0d1220dd;border:1px solid #38405a;padding:5px 12px;border-radius:4px;font-size:12px;animation:tfade 2.4s forwards}
@keyframes tfade{0%{opacity:0;transform:translateY(8px)}12%{opacity:1;transform:none}75%{opacity:1}100%{opacity:0}}

/* ---------- 快捷栏 ---------- */
#hotbar{position:absolute;left:50%;transform:translateX(-50%);top:6px;display:flex;gap:3px;z-index:5}
.slot{position:relative;width:44px;height:44px;background:#141826cc;border:2px solid #333b52;border-radius:4px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.slot.sel{border-color:#f2c14e;background:#232a3ecc;box-shadow:0 0 8px #f2c14e55}
.slot canvas{width:32px;height:32px;image-rendering:pixelated;pointer-events:none}
.slot .cnt{position:absolute;right:2px;bottom:0;font-size:10px;text-shadow:0 1px 2px #000;pointer-events:none}
.slot .num{position:absolute;left:2px;top:0;font-size:9px;opacity:.5;pointer-events:none}

/* ---------- 面板 ---------- */
.panel{position:absolute;z-index:20;background:#0e1220f2;border:2px solid #39415c;border-radius:8px;padding:8px;box-shadow:0 10px 40px #000a;max-height:86vh;overflow:auto}
#invPanel{left:8px;top:58px;width:min(430px,94vw)}
#chestPanel{right:8px;top:58px;width:min(320px,94vw)}
#shopPanel{right:8px;top:58px;width:min(300px,94vw)}
.panelHead{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;font-size:13px;letter-spacing:1px}
.panelHead .x{background:#2a3048;border:1px solid #444d6b;color:#ddd;border-radius:4px;width:22px;height:22px;cursor:pointer}
#invGrid,#chestGrid{display:grid;grid-template-columns:repeat(10,1fr);gap:3px}
#chestGrid{grid-template-columns:repeat(5,1fr)}
#equipRow{display:flex;gap:4px;align-items:center;margin-bottom:6px}
.eqSlot{width:40px;height:40px;background:#141826;border:2px dashed #3a4260;border-radius:4px;display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer}
.eqSlot em{position:absolute;font-style:normal;font-size:10px;opacity:.35}
.eqSlot canvas{width:30px;height:30px;image-rendering:pixelated;position:relative}
#defenseTag{margin-left:auto;font-size:12px;color:#9fd2ff}
#craftHead{margin:8px 0 4px;font-size:13px;letter-spacing:1px;border-top:1px solid #2a3145;padding-top:6px}
#craftHead small{opacity:.6;font-size:11px}
#craftList{display:flex;flex-wrap:wrap;gap:4px;max-height:170px;overflow:auto}
.recipe{display:flex;align-items:center;gap:4px;background:#161b2b;border:1px solid #333c56;border-radius:4px;padding:3px 6px 3px 3px;cursor:pointer;font-size:11px}
.recipe:hover{background:#212840;border-color:#5b678d}
.recipe canvas{width:26px;height:26px;image-rendering:pixelated}
.hintRow{font-size:11px;opacity:.5;margin-top:6px}
#shopList{display:flex;flex-direction:column;gap:3px}
.shopItem{display:flex;align-items:center;gap:6px;background:#161b2b;border:1px solid #333c56;border-radius:4px;padding:3px 6px;cursor:pointer;font-size:12px}
.shopItem:hover{background:#222a42}
.shopItem canvas{width:26px;height:26px;image-rendering:pixelated}
.shopItem .price{margin-left:auto;color:#ffd97a;font-size:11px}
#tooltip{position:absolute;z-index:40;background:#080b14f5;border:1px solid #4a5573;border-radius:5px;padding:6px 9px;font-size:12px;max-width:230px;pointer-events:none;line-height:1.5}
#tooltip b{color:#ffe9a8}
#tooltip .st{color:#9fd2ff;font-size:11px;display:block}
#tooltip .ds{opacity:.7;font-size:11px;display:block;margin-top:3px}

/* ---------- 触屏 ---------- */
#touchUI{position:absolute;inset:0;z-index:15;pointer-events:none}
#stickBase{position:absolute;left:max(18px,env(safe-area-inset-left));bottom:max(24px,env(safe-area-inset-bottom));width:132px;height:132px;border-radius:50%;background:#1119;border:2px solid #ffffff26;pointer-events:auto;touch-action:none}
#stickKnob{position:absolute;left:41px;top:41px;width:50px;height:50px;border-radius:50%;background:#ffffff30;border:2px solid #ffffff4d}
#btnCol{position:absolute;right:max(18px,env(safe-area-inset-right));bottom:max(24px,env(safe-area-inset-bottom));display:flex;gap:12px;align-items:flex-end;pointer-events:auto}
#btnColLeft{position:absolute;right:max(18px,env(safe-area-inset-right));bottom:max(150px,calc(env(safe-area-inset-bottom) + 150px));display:flex;gap:8px;pointer-events:auto}
.tbtn{width:82px;height:82px;border-radius:50%;background:#ffffff1f;border:2px solid #ffffff40;color:#fff;font-size:20px;font-weight:600;pointer-events:auto;touch-action:none}
.tbtn.small{width:50px;height:50px;font-size:14px}
.tbtn:active{background:#ffffff45}
#aimDot{position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;border:2px solid #ffffffcc;border-radius:50%;pointer-events:none}

/* ---------- 菜单 ---------- */
#menu{position:absolute;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 35%,#1b2440,#05070f 70%)}
#menuInner{text-align:center;padding:20px;max-width:92vw}
#menu h1{font-size:clamp(34px,9vw,64px);letter-spacing:8px;color:#ffe9a8;text-shadow:0 0 24px #ffb84a55,0 4px 0 #6b4a12}
.sub{opacity:.6;margin:6px 0 22px;font-size:13px;letter-spacing:2px}
.menuBtns{display:flex;flex-direction:column;gap:10px;align-items:center}
.menuBtns button,#pause button,#deathScreen button{width:220px;padding:11px;background:#1b2237;border:2px solid #47517a;color:#e8e6df;border-radius:6px;font-size:15px;cursor:pointer;letter-spacing:2px}
.menuBtns button:hover,#pause button:hover{background:#28314e;border-color:#7c8ac4}
#worldSizeRow{margin-top:16px;font-size:12px;opacity:.8;display:flex;gap:10px;justify-content:center;align-items:center}
#genProgress{margin-top:18px;width:260px;margin-left:auto;margin-right:auto}
#genBar{height:8px;background:#f2c14e;width:0%;border-radius:4px;transition:width .2s}
#genText{font-size:12px;opacity:.7;display:block;margin-top:6px}
#helpBox{margin-top:18px;background:#0d1220cc;border:1px solid #333b56;border-radius:8px;padding:12px;font-size:12px;text-align:left}
#helpBox td{padding:2px 10px 2px 0}
#helpBox td:first-child{color:#ffd97a;white-space:nowrap}
#helpBox .tip{margin-top:8px;opacity:.7;line-height:1.6}
#pause,#deathScreen{position:absolute;inset:0;z-index:55;display:flex;align-items:center;justify-content:center;background:#03050bcc}
.pauseInner,.deathInner{text-align:center;display:flex;flex-direction:column;gap:10px;align-items:center}
.pauseInner h2,.deathInner h2{letter-spacing:6px;margin-bottom:8px;font-weight:400}
#deathMsg{color:#ff8f8f}
.volRow{font-size:12px;opacity:.8;display:flex;gap:8px;align-items:center}
#mapCanvas{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:50;image-rendering:pixelated;border:2px solid #47517a;border-radius:6px;background:#05070f;max-width:94vw;max-height:80vh}


/* =====================================================================
   触屏 / 窄屏布局
   由 JS 显式标记，而不是猜 pointer:coarse：
     body.touch      真触屏设备（显示虚拟摇杆）
     body.narrow     窗口宽度 < 760，无论什么设备
     body.portrait / body.landscape   当前屏幕方向
   ===================================================================== */

/* ---------- 通用：触屏或窄屏 ---------- */
body:is(.touch,.narrow) #hotbar{left:0;transform:none;width:100vw;justify-content:center;gap:2px;top:4px;padding:0 3px}
body:is(.touch,.narrow) .slot{width:calc((100vw - 26px)/10);height:calc((100vw - 26px)/10);max-width:46px;max-height:46px;border-width:2px}
body:is(.touch,.narrow) .slot canvas{width:74%;height:74%}
body:is(.touch,.narrow) .slot .num{font-size:8px}
body:is(.touch,.narrow) .slot .cnt{font-size:9px}
body:is(.touch,.narrow) .bar span{font-size:9px;line-height:12px}
body:is(.touch,.narrow) #dayText{font-size:10px}
body:is(.touch,.narrow) .recipe{font-size:12px;padding:5px 8px 5px 5px}
body:is(.touch,.narrow) .recipe canvas{width:28px;height:28px}
body:is(.touch,.narrow) .eqSlot{width:44px;height:44px}
body:is(.touch,.narrow) #invGrid{gap:2px}
/* 背包格随面板宽度自适应，避免溢出 */
body:is(.touch,.narrow) #invGrid .slot,
body:is(.touch,.narrow) #chestGrid .slot{width:100%;height:auto;aspect-ratio:1/1;max-width:none;max-height:none}
body:is(.touch,.narrow) #tooltip{display:none!important}
/* 打开面板时隐藏虚拟按键，避免误触与遮挡 */
body.touch.inv-open #touchUI{display:none}

/* ---------- 竖屏：快捷栏占满一行，HUD 顺次下移，面板占满宽度 ---------- */
body:is(.touch,.narrow).portrait #statBars{top:calc((100vw - 26px)/10 + 12px);left:6px}
body:is(.touch,.narrow).portrait .bar{width:132px;height:14px}
body:is(.touch,.narrow).portrait #clock{top:calc((100vw - 26px)/10 + 10px);right:8px;font-size:11px}
body:is(.touch,.narrow).portrait #coins{top:calc((100vw - 26px)/10 + 46px);right:8px}
body:is(.touch,.narrow).portrait #bossBarWrap{bottom:auto;top:calc((100vw - 26px)/10 + 74px);width:78vw}
body:is(.touch,.narrow).portrait #toast{top:calc((100vw - 26px)/10 + 96px)}
body:is(.touch,.narrow).portrait #invPanel{left:2vw;right:2vw;width:96vw;top:auto;bottom:6px;max-height:56vh}
body:is(.touch,.narrow).portrait #chestPanel,
body:is(.touch,.narrow).portrait #shopPanel{left:2vw;right:auto;width:96vw;top:calc((100vw - 26px)/10 + 60px);max-height:34vh}
body:is(.touch,.narrow).portrait.chest-open #invPanel{max-height:42vh}
body:is(.touch,.narrow).portrait #craftList{max-height:130px}

/* ---------- 横屏（推荐玩法）：HUD 回到两角，面板左右分栏 ---------- */
body:is(.touch,.narrow).landscape .slot{width:42px;height:42px;max-width:42px;max-height:42px}
body:is(.touch,.narrow).landscape #statBars{top:6px;left:8px}
body:is(.touch,.narrow).landscape .bar{width:124px;height:13px}
body:is(.touch,.narrow).landscape #clock{top:6px;right:10px}
body:is(.touch,.narrow).landscape #coins{top:36px;right:10px}
body:is(.touch,.narrow).landscape #bossBarWrap{top:auto;bottom:16px;width:min(46vw,420px)}
body:is(.touch,.narrow).landscape #toast{top:56px}
body:is(.touch,.narrow).landscape #invPanel{left:8px;right:auto;top:54px;bottom:auto;width:min(54vw,540px);max-height:80vh}
body:is(.touch,.narrow).landscape #chestPanel,
body:is(.touch,.narrow).landscape #shopPanel{right:8px;left:auto;top:54px;width:min(34vw,340px);max-height:80vh}
body:is(.touch,.narrow).landscape.chest-open #invPanel{max-height:80vh}
body:is(.touch,.narrow).landscape #craftList{max-height:150px}
body.touch.landscape .tbtn{width:70px;height:70px;font-size:18px}
body.touch.landscape .tbtn.small{width:44px;height:44px;font-size:12px}
body.touch.landscape #stickBase{width:116px;height:116px}
body.touch.landscape #stickKnob{width:44px;height:44px;left:36px;top:36px}
body.touch.landscape #btnColLeft{bottom:max(112px,calc(env(safe-area-inset-bottom) + 112px))}
/* 极矮屏（横屏小手机）再缩一档 */
@media (max-height:400px){
  body.touch.landscape .tbtn{width:60px;height:60px;font-size:15px}
  body.touch.landscape .tbtn.small{width:38px;height:38px;font-size:11px}
  body.touch.landscape #stickBase{width:100px;height:100px}
  body.touch.landscape #stickKnob{width:38px;height:38px;left:31px;top:31px}
  body.touch.landscape #btnColLeft{bottom:max(96px,calc(env(safe-area-inset-bottom) + 96px))}
  body:is(.touch,.narrow).landscape .slot{width:36px;height:36px;max-width:36px;max-height:36px}
}

/* ========== 竖屏提示：建议横屏游玩 ========== */
#rotateHint{position:absolute;inset:0;z-index:70;display:none;flex-direction:column;
  align-items:center;justify-content:center;gap:18px;background:#05070feb;text-align:center;padding:24px}
#rotateHint .phone{width:64px;height:104px;border:3px solid #ffe9a8;border-radius:10px;position:relative;
  animation:rot 2.4s ease-in-out infinite}
#rotateHint .phone::after{content:'';position:absolute;left:50%;bottom:6px;transform:translateX(-50%);
  width:22px;height:3px;background:#ffe9a8;border-radius:2px}
@keyframes rot{0%,30%{transform:rotate(0)}60%,100%{transform:rotate(-90deg)}}
#rotateHint h3{font-size:17px;font-weight:600;letter-spacing:2px;color:#ffe9a8}
#rotateHint p{font-size:13px;opacity:.7;line-height:1.7;max-width:300px}
#rotateHint button{margin-top:6px;padding:9px 22px;background:#1b2237;border:2px solid #47517a;
  color:#e8e6df;border-radius:6px;font-size:13px;letter-spacing:1px}
/* 只有真触屏设备、正在游戏、且竖屏时才提示 */
body.touch.portrait.playing #rotateHint{display:flex}
body.allow-portrait #rotateHint{display:none!important}