/* ============================================================
   PixelDev — mobile.css
   Touch layout: compact HUD, menu button, full-screen panels,
   virtual d-pad + interact button, safe-area support.
   ============================================================ */

/* ---------- touch-only elements ---------- */
body.touch #navbar{display:none}
body.touch .ctl-btn.wide .ctl-label{display:none}
body.touch .ctl-btn.wide{padding:0;width:38px;justify-content:center}
body.touch #tip{top:max(62px, calc(env(safe-area-inset-top) + 56px));bottom:auto;left:50%;transform:translateX(-50%);max-width:min(92vw,360px)}
body.touch #toast{left:auto;right:max(14px, env(safe-area-inset-right));transform:none;bottom:170px;max-width:min(70vw,300px);text-align:left}

/* ---------- compact HUD ---------- */
body.touch #hud{top:max(8px, env(safe-area-inset-top));left:max(8px, env(safe-area-inset-left));padding:6px 10px 6px 6px;gap:8px}
body.touch #hudPortrait{width:36px;height:36px}
body.touch .hud-name{font-size:13px}
body.touch .hud-role{font-size:10px}
body.touch .xp{width:52px}
body.touch .hearts .ic{width:10px;height:10px}
body.touch .lvl{display:none}

/* ---------- controls ---------- */
body.touch #controls{top:max(8px, env(safe-area-inset-top));right:max(8px, env(safe-area-inset-right));gap:7px}
body.touch .ctl-btn{height:36px;padding:0 9px}

/* menu button (next to controls) */
#menuBtn{
  position:absolute;z-index:40;display:none;
  top:max(8px, env(safe-area-inset-top));right:max(54px, calc(env(safe-area-inset-right) + 50px));
  width:36px;height:36px;
  background:linear-gradient(180deg,rgba(16,26,48,.92),rgba(10,18,38,.92));
  border:1px solid var(--line);border-radius:var(--r-md);
  color:var(--ink);
  box-shadow:var(--shadow-pop), inset 0 1px 0 rgba(255,255,255,.06);
}
#menuBtn .ic{width:18px;height:18px;margin:auto}
body.touch #menuBtn{display:grid;place-items:center}

/* ---------- virtual d-pad ---------- */
#dpad{
  position:absolute;z-index:40;display:none;
  left:max(12px, env(safe-area-inset-left));
  bottom:max(16px, env(safe-area-inset-bottom));
  grid-template-columns:repeat(3,54px);
  grid-template-rows:repeat(3,54px);
  gap:5px;
  touch-action:none;user-select:none;-webkit-user-select:none;
}
body.touch #dpad{display:grid}
.dpad-btn{
  border-radius:13px;
  background:linear-gradient(180deg,rgba(16,26,48,.85),rgba(9,15,32,.85));
  border:1px solid #2b4a8f;
  color:#9fc0ff;
  display:grid;place-items:center;
  touch-action:none;
  -webkit-tap-highlight-color:transparent;
  box-shadow:0 4px 12px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06);
  transition:background .08s, transform .08s, border-color .08s;
}
.dpad-btn .ic{width:22px;height:22px}
.dpad-btn.pressed,.dpad-btn:active{
  background:linear-gradient(180deg,#274b93,#1c3568);
  border-color:var(--cyan);color:#eaf4ff;
  transform:scale(.94);
}

/* ---------- interact button ---------- */
#interactBtn{
  position:absolute;z-index:40;display:none;
  right:max(16px, env(safe-area-inset-right));
  bottom:max(24px, calc(env(safe-area-inset-bottom) + 8px));
  width:66px;height:66px;border-radius:50%;
  background:linear-gradient(180deg,rgba(16,26,48,.9),rgba(9,15,32,.9));
  border:2px solid #2e57a8;color:var(--gold);
  box-shadow:0 6px 18px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .1s, border-color .15s, box-shadow .15s;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
#interactBtn .ic{width:30px;height:30px;margin:auto}
body.touch #interactBtn{display:grid;place-items:center}
#interactBtn:active,#interactBtn.ready{
  border-color:var(--gold);
  box-shadow:0 0 0 4px rgba(255,210,74,.15),0 6px 18px rgba(0,0,0,.5),var(--glow-gold);
  transform:scale(1.04);
}

/* ---------- panels become full-screen sheets ---------- */
body.touch .panel{
  inset:0;top:0;left:0;transform:none;
  width:100%;height:100%;
  border:none;border-radius:0;
  background:#0b1224;
  max-width:100%;
}
body.touch .panel.open{animation:sheet-up .28s cubic-bezier(.3,1.1,.6,1)}
body.touch .panel-head{
  padding:max(10px, env(safe-area-inset-top)) 12px 10px 14px;
  position:relative;
}
body.touch .panel-body{padding:14px 14px max(20px, env(safe-area-inset-bottom))}
body.touch .panel-title{font-size:15.5px}
body.touch .panel-ico{width:30px;height:30px}
body.touch .panel-close{width:30px;height:30px}

/* mobile menu sheet */
#menuSheet{
  position:absolute;inset:0;z-index:65;display:none;
  background:rgba(5,9,20,.7);
}
#menuSheet.open{display:block;animation:fade .15s ease-out}
.menu-card{
  position:absolute;top:0;right:0;bottom:0;
  width:min(320px,86vw);
  background:linear-gradient(180deg,#101a30,#0b1428);
  border-left:1px solid var(--line);
  box-shadow:-16px 0 40px rgba(0,0,0,.5);
  display:flex;flex-direction:column;
  padding:max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
  animation:slide-l .22s cubic-bezier(.3,1.1,.6,1);
  overflow-y:auto;
}
.menu-head{display:flex;align-items:center;justify-content:space-between;padding:4px 4px 10px;border-bottom:1px solid var(--line-soft);margin-bottom:8px}
.menu-head span{font-weight:800;letter-spacing:1px;font-size:12px;color:var(--ink-faint);text-transform:uppercase}
.menu-item{
  display:flex;align-items:center;gap:11px;width:100%;
  padding:11px 10px;border-radius:var(--r-md);
  color:var(--ink);font-size:14px;font-weight:600;text-align:left;
  transition:background .12s;
}
.menu-item:hover,.menu-item:active{background:var(--tile)}
.menu-item .ico{width:30px;height:30px;border-radius:8px;flex:none;
  background:linear-gradient(180deg,#1a2f57,#13203e);border:1px solid #33518f;
  display:grid;place-items:center;color:var(--acc,var(--cyan))}
.menu-item .ico .ic{width:15px;height:15px}
.menu-item .chev{margin-left:auto;color:var(--ink-faint);width:16px;height:16px}
.menu-sep{height:1px;background:var(--line-soft);margin:8px 4px}

/* ---------- responsive grids on touch ---------- */
body.touch .proj-grid,body.touch .ach-grid{grid-template-columns:1fr}
body.touch .skills-grid{grid-template-columns:repeat(auto-fill,minmax(84px,1fr))}
body.touch .panel-body{font-size:14px}

/* larger tap targets for cards */
body.touch .card{padding:14px}
body.touch .btn{height:46px}

/* very narrow phones */
@media (max-width:360px){
  #dpad{grid-template-columns:repeat(3,48px);grid-template-rows:repeat(3,48px)}
  #interactBtn{width:58px;height:58px}
  .hud-role{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* touch landscape: keep dpad but move it up from screen edge */
@media (max-height:480px) and (pointer:coarse){
  #dpad{bottom:max(10px, env(safe-area-inset-bottom));grid-template-columns:repeat(3,44px);grid-template-rows:repeat(3,44px)}
  #interactBtn{width:52px;height:52px;bottom:max(14px, env(safe-area-inset-bottom))}
  .dpad-btn .ic{width:18px;height:18px}
}