:root{
  --control-clearance: 9.5rem;
  --inventory-h: 92px;
}
body.map{ --control-clearance: 8.5rem; }
body.battle{ --control-clearance: 10.5rem; }

/* Desktop: no on-screen controls; no extra clearance */
@media (hover:hover) and (pointer:fine){
  :root{ --control-clearance: 0rem; }
  #touch-controls{ display:none !important; }
  #joysticks{ display:none !important; }
}

*{ box-sizing:border-box; }
html,body{
  margin:0;padding:0;height:100%;
  font-family:system-ui,Arial,sans-serif;
  background:#101010;color:#f1f1f1;text-align:center;
  touch-action:none; user-select:none; -webkit-user-select:none;
  overscroll-behavior:none; -webkit-touch-callout:none;
}
header{background:#222;padding:.25rem;}
header h1{ font-size: clamp(1rem, 3.6vw, 1.6rem); margin:.2rem 0; }
#hud{display:flex;gap:.9rem;justify-content:center;background:#181818;font-size:.82rem;padding:.25rem;}

/* Canvas: square, no crop */
canvas{
  background:#000;margin:.25rem auto 0;display:block;border:2px solid #444;
  width:100%; max-width:480px; height:auto; touch-action:none;
  margin-bottom: .5rem; /* space before inventory */
}

/* Inventory window: in-flow, sticky above controls */
#inventory-window{
  position:sticky;
  bottom: calc(var(--control-clearance) + env(safe-area-inset-bottom) + .5rem);
  left:0; right:0; margin:.25rem auto 0;
  width:calc(100% - 1.5rem);
  max-width:480px;
  min-height: 56px;
  background:#141414;border:2px solid #222;border-radius:10px;
  padding:.35rem .5rem; z-index:10; pointer-events:auto;
  display:flex; flex-direction:column; justify-content:flex-start;
  box-shadow:0 6px 16px rgba(0,0,0,.45);
}
#inventory-window .title{font-size:.8rem;color:#cfcfcf;margin-bottom:.25rem;opacity:.9;text-align:left;}
#inventory.grid, #inventory{
  display:grid;grid-template-columns:repeat(auto-fill,32px);
  gap:6px;justify-content:flex-start;align-content:start;
  max-height: calc(var(--inventory-h) - 1.4rem);
}
#inventory img{width:32px;height:32px;border:1px solid #444;border-radius:4px;image-rendering:pixelated;background:#0e0e0e;}

/* Fixed controls */
.dpad{position:fixed;width:110px;height:110px;z-index:5;pointer-events:auto;}
#move-pad{bottom:1rem;left:max(1rem, env(safe-area-inset-left));}
#fire-pad{bottom:1rem;right:max(1rem, env(safe-area-inset-right));}
.dpad button{position:absolute;width:36px;height:36px;background:#444;border:none;border-radius:6px;color:#fff;font-size:20px;opacity:.9;touch-action:none;}
.dpad button:active{background:#777;}
.up{left:37px;top:0;}
.down{left:37px;bottom:0;}
.left{left:0;top:37px;}
.right{right:0;top:37px;}

#joysticks{display:none;}
.joystick{position:fixed;width:128px;height:128px;border-radius:50%;background:rgba(255,255,255,.12);z-index:6;touch-action:none;}
#joy-left{bottom:1rem;left:max(1rem, env(safe-area-inset-left));}
#joy-right{bottom:1rem;right:max(1rem, env(safe-area-inset-right));}
.joystick .stick{position:absolute;width:48px;height:48px;left:40px;top:40px;border-radius:50%;background:rgba(255,255,255,.88);transition:transform .05s linear;}
.joystick.active{background:rgba(255,255,255,.25);}